CSS3 - Transformations 3D

En utilisant des transformations 3D, nous pouvons déplacer l'élément sur l'axe x, l'axe y et l'axe z.L'exemple ci-dessous spécifie clairement la rotation de l'élément.

Méthodes de transformation 3D

Les méthodes ci-dessous sont utilisées pour appeler les transformations 3D -

N ° Sr. Valeur et description
1

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Utilisé pour transformer l'élément en utilisant 16 valeurs de matrice
2

translate3d(x,y,z)

Utilisé pour transformer l'élément en utilisant les axes x, y et z
3

translateX(x)

Utilisé pour transformer l'élément en utilisant l'axe des x
4

translateY(y)

Utilisé pour transformer l'élément en utilisant l'axe y
5

translateZ(z)

Utilisé pour transformer l'élément en utilisant l'axe y
6

scaleX(x)

Utilisé pour mettre à l'échelle transforme l'élément en utilisant l'axe des x
sept

scaleY(y)

Utilisé pour mettre à l'échelle transforme l'élément en utilisant l'axe y
8

scaleY(y)

Utilisé pour transformer l'élément en utilisant l'axe z
9

rotateX(angle)

Utilisé pour faire pivoter transforme l'élément en utilisant l'axe des x
dix

rotateY(angle)

Utilisé pour faire pivoter transforme l'élément en utilisant l'axe y
11

rotateZ(angle)

Utilisé pour faire pivoter transforme l'élément en utilisant l'axe z

Transformations 3D sur l'axe X

L'exemple suivant montre les transformations 3D de l'axe x.

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

Il produira le résultat suivant -

Transformations 3D sur l'axe Y

L'exemple suivant montre les transformations 3D de l'axe y -

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

Il produira le résultat suivant -

Transformations 3D sur l'axe Z

L'exemple suivant montre les transformations 3D de l'axe Z -

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

Il produira le résultat suivant -