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.
NOTE: Considering that the syntaxes and rules are almost identical to 2D transform methods, we are going to show a few examples only.

Example

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

 

›› go to examples ››