CSS3 Click Chart | CSS3 Browser Support and Information

Skew Transforms

Allows you to skew an element on the y or x axis using a function as a value for the transform property.

Specification

Example Code

.element {
    -webkit-transform: skew(45deg, 30deg);
    -moz-transform: skew(45deg, 30deg);
    -o-transform: skew(45deg, 30deg);
    -ms-transform: skew(45deg, 30deg);
    transform: skew(45deg, 30deg);
}

Live Demonstration

This box is skewed horizontally using CSS3 transforms.

Desktop Browser Support

Standard Syntax:
IE10+, Firefox 16+

Vendor Prefix:
IE9+, Firefox 3.5+, Chrome 4+, Safari 3.1+, Opera 10.5+

Tools / Polyfills

cssSandpaper
Transformie

Tutorials / Articles

A Primer on CSS3 Transforms (SitePoint)