CSS3 3D transform methods (translate3D(), rotate3D(), scale3D() and matrix3D())

The CSS3 3D transformations are similar to 2D ones, except that they do not include the skew() method. These methods let us utilize the Z-axis to achieve the perception of depth.

Syntax:

selector { 

    transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z) | rotate3d(x,y,z,angle) | rotateX(angle) | rotateY(angle) | rotateZ(angle) | perspective(n);

}

Values:

The 3D transform methods are:

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n); Creates 3D transformation in form of 4x4 matrix of 16 values.
• translate3d(x,y,z); Creates a 3D translation.
• translateX(x); Creates a 3D translation by X-axis only.
• translateY(y); Creates a 3D translation by Y-axis only.
• translateZ(z); Creates a 3D translation by Z-axis only.
• scale3d(x,y,z); Creates a 3D scale transformation.
• scaleX(x); Creates a 3D scale transformation assigning a value to X-axis only.
• scaleY(y); Creates a 3D scale transformation assigning a value to Y-axis only.
• scaleZ(z); Creates a 3D scale transformation assigning a value to Z-axis only.
• rotate3d(x,y,z,angle); Creates a 3D rotation.
• rotateX(angle); Creates a 3D rotation along X-axis only.
• rotateY(angle); Creates a 3D rotation along Y-axis only.
• rotateZ(angle); Creates a 3D rotation along Z-axis only.
• perspective(n); Creates a perspective view for a 3D element.

Example

The 3D transformations example with rotate(), scale() and translate() methods:

›› go to examples ››