CSS3 Transform Properties
The transform allows you to transform the display of an element in a number of different ways. Once again design features that once required the creation of special images can now be accomplished using the transform property.
The property enables you to transform an element both 2-dimensionally and 3-dimensionally. There are a combined 21 different functions. Here is a full list of all the transform properties.
| Function | Description |
| none | No transformation |
| translate(x,y) | Moves the element on an x-y 2D plane |
| translate3d(x,y,z) | Moves the element on an x-y-z 3D plane |
| translateX(x) | Moves the element along the X-axis |
| translateY(y) | Moves the element along the Y-axis |
| translateZ(z) | Moves the element along the Z axis for a 3D shift |
| scale(n,n) | Changes the 2D x and y scale of the element by a factor |
| scale3d(n,n,n) | Changes the 3D x, y and z scale of the element by a factor |
| scaleX(n) | Changes the X-scale of an element by a factor |
| scaleY(n) | Changes the Y-scale of an element by a factor |
| scaleZ(n) | Change the 3D Z-scale of an element by a factor |
| rotate(angle) | Performs a 2D rotation |
| rotate3d(x,y,z,angle) | Performs a 3D rotation |
| rotateX(angle) | Performs a 3D rotation along the X-axis |
| rotateY(angle) | Performs a 3D rotation along the Y-axis |
| rotateZ(angle) | Performs a 3D rotation along the Z-axis |
| skew(x-angle,y-angle) | Performs a 2D skew along the X- and the Y-axis |
| skewX(angle) | Performs a 2D skew along the X-axis |
| skewY(angle) | Performs a 2D skew along the Y-axis |
| perspective(n) | Changes the perspective view for a 3D transform |
| matrix(n,n,n,n,n,n) | Sets a 2D transformation, using a matrix of six values |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Sets a 3D transformation, using a matrix of 16 values |