back

Transform

In CSS the transform property can be used to give 2D or 3D transformations to an element.
The 2D options are:
(1) Matrix(0,0,0,0,0,0), uses a matrix of 6 values to transform an element.
(2) Translate(X,Y), this is similar to relative positioning, it takes two values, the first defines the left/right movement and the second the top/bottom.
(3) TranslateX(X), defines a translation using only the X axis.
(4) TranslateY(Y), defines a translation using only the Y axis.
(5) Scale(X,Y), scales the element, the first value sets the X scale and the second the Y scale, values over 1 increase the size, and those below 1 decrease it.
(6) ScaleX(X), scales the element using only the X axis.
(7) ScaleY(Y), scales the element using only the Y axis.
(8) Rotate(angle), rotate the element by the angle specified.
(9) Skew(X-angle,Y-angle), skew the element by both the X and Y axis, the values define the angles to skew.
(10) SkewX(angle), skew the element by the X axis.
(11) SkewY(angle), skew the element by the Y axis.
The 3D options are:
(1) Matrix3d(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0), uses a matrix of 16 values to transform an element.
(2) Translate3d(X,Y,Z), X defines left/right, Y defines top/bottom, Z defines closer or further.
(3) TranslateZ(Z), defines a translation using only the Z axis.
(4) Scale3D(X,Y,Z), scales using the X,Y, and Z axis.
(5) ScaleZ(Z), scales the element using the Z axis.
(6) RotateX(angle), rotate the element along the X axis by the angle specified.
(7) RotateY(angle), rotate the element along the Y axis by the angle specified.
(8) RotateZ(angle), rotate the element along the Z axis by the angle specified.
(9) Rotate3D(X,Y,Z,angle), 3D rotation of the element.
Another option is:
(1) None, there will be no transformation.
For maximum browser support, you should use the following prefixes:
(1) transform:
(2) -webkit-transform:

Example