transform

The transform property specifies a 2D or 3D transformation to an element, allowing you to implement rotate, scale, skew, and other transformations.

Syntax

Examples:

div.one {
  transform: rotate(35deg);
}

div.two {
  transform: skewY(40deg);
}

div.three {
  transform: scaleX(1.1);
}

Values

none
Designates that there will be no transformation.

matrix(n,n,n,n,n,n)
Designates a 2D transformation by defining 6 values of a matrix.

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Designates a 3D transformation by defining 16 values of a 4×4 matrix.

translate(x,y)
Designates a 2D translation.

translate3d(x,y,z)
Designates a 3D translation.

translateX(x)
Designates a translation by defining the value of only the X-axis.

translateY(y)
Designates a translation by defining the value of only the Y-axis.

translateZ(z)
Designates a 3D translation by defining the value of only the Z-axis.

scale(x,y)
Designates a 2D scale transformation.

scale3d(x,y,z)
Designates a 3D scale transformation.

scaleX(x)
Designates a scale transformation by defining the value of only the X-axis.

scaleY(y)
Designates a scale transformation by defining the value of only the Y-axis.

scaleZ(z)
Designates a 3D scale transformation by defining the value of only the Z-axis.

rotate(angle)
Designates a 2D rotation by defining the angle.

rotate3d(x,y,z,angle)
Designates a 3D rotation.

rotateX(angle)
Designates a 3D rotation on the X-axis.

rotateY(angle)
Designates a 3D rotation on the Y-axis.

rotateZ(angle)
Designates a 3D rotation on the Z-axis.

skew(x-angle,y-angle)
Designates a 2D skew transformation on the X- and the Y-axis.

skewX(angle)
Designates a 2D skew transformation on the X–axis.

skewY(angle)
Designates a 2D skew transformation on the Y–axis.

perspective(n)
Designates a perspective view for a 3D transformed element.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of transform? Submit a codepen.io demo and we'll showcase it here ↴