transform
The transform
property rotates, scales, skews, or translates 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 degrees, scaling up by half and rotating 100 degrees in one declaration.
img {transform: skew(20deg, 20deg) scale(1.5, 1.5) rotate(100deg);}