CSS transform attribute

Definition and Usage

The transform property applies 2D or 3D transformations to elements. This property allows us to rotate, scale, move, or skew elements.

To better understand the transform property, please view thisDemonstration.

See also:

CSS3 Tutorial:CSS3 2D Transformation

CSS3 Tutorial:CSS3 3D Transformation

HTML DOM Reference Manual:transform property

Example

Rotate the div element:

div
{
transform:rotate(7deg);
}

Try it yourself

More examples at the bottom of the page.

CSS Syntax

transform: none|transform-functions;

Attribute value

Value Description Test
none Define no transformation. Test
matrix(n,n,n,n,n,n) Define 2D transformation using a matrix with six values. Test
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Define 3D transformation using a 4x4 matrix with 16 values.
translate(x,y) Define a 2D transformation. Test
translate3d(x,y,z) Define a 3D transformation.
translateX(x) Define a transformation, using only the value of the X axis. Test
translateY(y) Define a transformation, using only the value of the Y axis. Test
translateZ(z) Define a 3D transformation, using only the value of the Z axis.
scale(x,y) Define a 2D scale transformation. Test
scale3d(x,y,z) Define a 3D scale transformation.
scaleX(x) Define a scale transformation by setting the value of the X axis. Test
scaleY(y) Define a scale transformation by setting the value of the Y axis. Test
scaleZ(z) Define a 3D scale transformation by setting the value of the Z axis.
rotate(angle) Define a 2D rotation, specifying the angle in the parameters. Test
rotate3d(x,y,z,angle) Define 3D rotation.
rotateX(angle) Define a 3D rotation along the X axis. Test
rotateY(angle) Define a 3D rotation along the Y axis. Test
rotateZ(angle) Define a 3D rotation along the Z axis. Test
skew(x-angle,y-angle) Define a 2D skew transformation along both the X and Y axes. Test
skewX(angle) Define a 2D skew transformation along the X axis. Test
skewY(angle) Define a 2D skew transformation along the Y axis. Test
perspective(n) Define a perspective view for 3D transform elements. Test

Technical Details

Default Value: none
Inheritance: no
Version: CSS3
JavaScript Syntax: object.style.transform="rotate(7deg)"

More examples

The image thrown on the table
This example demonstrates how to create a 'Polaroid' image and rotate the image.

Browser Support

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

Numbers with -webkit-, -moz-, or -ms- prefixes indicate the first version using the prefix.

property Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-