transform

Allows us to rotate, scale, skew or translate an element.

Syntax

transform: <values>;

The transition property can have one or more of the following properties as values:

  • none
  • matrix(n, n, n, n, n, n)
  • matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n)
  • translate(x, y)
  • translate3d(x, y, z)
  • translateX(x)
  • translateY(y)
  • translateZ(z)
  • scale(x, y)
  • scale3d(x, y, z)
  • scaleX(x)
  • scaleY(y)
  • scaleZ(z)
  • rotate(angle)
  • rotate3d(x, y, z, angle)
  • rotateX(angle)
  • rotateY(angle)
  • rotateZ(angle)
  • skew(x-angle, y-angle)
  • skewX(angle)
  • skewY(angle)
  • perspective(n)

Example 1

Transforming an img element by scaling down by half and rotating 75 degrees.

img {
transform: scale(0.5, 0.5);
transform: rotate(75deg);
}

Example 2

Transforming an img element by skewing 20 degress, scaling up by half and rotating 100 degrees in one declaration.

img {
transform: skew(20deg, 20deg) scale(1.5, 1.5) rotate(100deg);
}
Edit this page on GitHub

Contributors

Interested in helping build Docs? Read the Contribution Guide or share your feedback.

Learn CSS on Codecademy