ScanSkill

transform

The transform property helps to change the shape, position, and orientation of an element. It allows an element to rotate, scale, move, skew, etc.

Syntax

transform: none | transform-functions;

Property Values

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.