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

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>

 

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>

 

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">

      Example.com

      </div>

   </body>

</html>