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:

​x
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    width: 60%; height: 30px; padding:1% 3%; margin:0 5%;
    background-color: #ccc; border:2px ridge #a76; 
    color:#a76; font-weight:bold;
    transform: rotateX(180deg);
    /* ADD proprietary selectors if needed */
}
div+div {
    margin-top:10px;
    transform: scale3d(0.9,0.7,1.9);
    /* ADD proprietary selectors if needed */
}
div+div+div {
    margin-top:0px;
    transform:translateY(-15px);
    /* ADD proprietary selectors if needed */
}
div+div+div+div {
    margin-top:0px; margin-left:60%; width:40%;
    transform:rotateZ(90deg);
    /* ADD proprietary selectors if needed */
}
p {
    width:60%;
}
</style>
</head>
  
<body>
​
<div>rotateX()</div>
<div>scale3d()</div>
<div>translateY()</div>
<div>rotateZ()</div>
<br /><p><strong>Try changing methods from, i.e. rotateX() to rotateY(), etc...</strong></p>
</body>
</html>

 

›› go to examples ››