The transform
property helps to change the shape, position, and orientation of an element. It allows an element to rotate, scale, move, skew, etc.
transform: none | transform-functions;
none: It sets no transformation.
matrix(x, x, x, x, x, x): It sets a matrix transformation of 2-D type. It takes 6 values.
matrix3d(x, x, x, x, x, x, x, x, x): It sets a matrix transformation of 3-D type. It takes 9 values.
translate(x, y): It sets a translation across the X and Y axis.
translate3d(x, y, z): It sets a translation across the X, Y, and Z axis.
translateX(x): It sets the translation across the X-axis only.
translateY(y): It sets the translation across the Y-axis only.
translateZ(z): It sets the translation across the Z-axis only.
rotate(angle): It sets the angle of rotation.
rotate3d(x, y, z): It sets the rotation along the X, Y, and Z axis.
rotateX(angle): It sets the rotation along with the X-axis.
rotateY(angle): It sets the rotation along with the Y-axis.
rotateZ(angle): It sets the rotation along with the Z-axis.
scale(x, y): It sets the scale transformation along the X and Y axis.
scale3d(x, y, z): It sets the scale transformation along the X, Y, and Z axis.
scaleX(x): It sets the scale transformation along the X-axis.
scaleY(y): It sets the scale transformation along the Y-axis.
scaleZ(z): It sets the scale transformation along the Z-axis.
scale3d(x, y, z): It sets the scale transformation along the X, Y, and Z axis.
skew(x-angle, y-angle): It sets the skew transformation along the X and Y axis.
skewX(angle): It sets the skew transformation along with the X-axis.
skewY(angle): It sets the skew transformation along with the Y-axis.
skewZ(angle): It sets the skew transformation along with the Z-axis.
perspective(n): It sets the perspective of an element.