div.a {
transform: rotate(20deg);
}

div.b {
transform: skewY(20deg);
}

div.c {
transform: scaleY(1.5);
} Try it Yourself »

Definition and Usage

The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

Show demo ❯

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

Property skew( x-angle,y-angle ) Defines a 2D skew transformation along the X- and the Y-axis Demo ❯ skewX( angle ) Defines a 2D skew transformation along the X-axis Demo ❯ skewY( angle ) Defines a 2D skew transformation along the Y-axis Demo ❯ perspective( n ) Defines a perspective view for a 3D transformed element initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit

Images thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the pictures.

Related Pages

CSS tutorial: CSS 2D Transforms

CSS tutorial: CSS 3D Transforms

HTML DOM reference: transform property

❮ Previous Complete CSS Reference Next ❯

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use , cookie and privacy policy .

W3Schools is Powered by W3.CSS .