CSS3 - 3D Transforms

Using with 3d transforms, we can  move element to x-axis, y-axis and z-axis, Below example clearly specifies how the element will rotate.
Below methods are used to call 3D transforms −
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
Used to transforms the element by using 16 values of matrix
translate3d(x,y,z)
Used to transforms the element by using x-axis,y-axis and z-axis
translateX(x)
Used to transforms the element by using x-axis
translateY(y)
Used to transforms the element by using y-axis
translateZ(z)
Used to transforms the element by using y-axis
scaleX(x)
Used to scale transforms the element by using x-axis
scaleY(y)
Used to scale transforms the element by using y-axis
scaleY(y)
Used to transforms the element by using z-axis
rotateX(angle)
Used to rotate transforms the element by using x-axis
rotateY(angle)
Used to rotate transforms the element by using y-axis
rotateZ(angle)
Used to rotate transforms the element by using z-axis
The following an example shows the x-axis 3D transforms.
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg); 
            
            /* Safari */
            transform: rotateX(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate X-axis</p>
      
      <div id = "myDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>
It will produce the following result −
Rotate X-axis
The following an example shows the y-axis 3D transforms −
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 
            
            /* Safari */
            transform: rotateY(150deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
   
      <div>
         tutorials point.com
      </div>
      
      <p>Rotate Y axis</p>
      
      <div id = "yDiv">
         tutorials point.com.
      </div>
      
   </body>
</html>
It will produce the following result −
Rotate Y axis
The following an example shows the Z-axis 3D transforms −
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Standard syntax */
         }
      </style>
   </head>

   <body>
      <div>
         tutorials point.com
      </div>
      
      <p>rotate Z axis</p>
      
      <div id = "zDiv">
         tutorials point.com.
      </div>
   </body>
</html> 
It will produce the following result −
rotate Z axis

    33 Lectures 
     2.5 hours 

 Anadi Sharma

    26 Lectures 
     2.5 hours 

 Frahaan Hussain

    44 Lectures 
     4.5 hours 

 DigiFisk (Programming Is Fun)

    21 Lectures 
     2.5 hours 

 DigiFisk (Programming Is Fun)

    51 Lectures 
     7.5 hours 

 DigiFisk (Programming Is Fun)

    52 Lectures 
     4 hours 

 DigiFisk (Programming Is Fun)
 Print
 Add Notes
 Bookmark this page