CSS3 - 3D transforms


Advertisements


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

Methods of 3D transforms

Below methods are used to call 3D transforms

Values Description
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

X-axis 3D transforms

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 −

Y-axis 3D transforms

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 −

Z-axis 3D transforms

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>
      <p>rotate Z axis</p>
      
      <div id="zDiv">
      tutorials point.com.
      </div>
   </body>
</html> 

It will produce the following result −



Advertisements