CSS3 - Trasformazioni 3D

Usando le trasformazioni 3d, possiamo spostare l'elemento sull'asse x, sull'asse ye sull'asse z, l'esempio sotto specifica chiaramente come ruoterà l'elemento.

Metodi di trasformazioni 3D

I metodi seguenti vengono utilizzati per chiamare le trasformazioni 3D:

Sr.No. Valore e descrizione
1

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

Utilizzato per trasformare l'elemento utilizzando 16 valori di matrice
2

translate3d(x,y,z)

Utilizzato per trasformare l'elemento utilizzando l'asse x, l'asse ye l'asse z
3

translateX(x)

Utilizzato per trasformare l'elemento utilizzando l'asse x
4

translateY(y)

Utilizzato per trasformare l'elemento utilizzando l'asse y
5

translateZ(z)

Utilizzato per trasformare l'elemento utilizzando l'asse y
6

scaleX(x)

Usato per scalare trasforma l'elemento usando l'asse x
7

scaleY(y)

Usato per scalare trasforma l'elemento utilizzando l'asse y
8

scaleY(y)

Utilizzato per trasformare l'elemento utilizzando l'asse z
9

rotateX(angle)

Utilizzato per ruotare trasforma l'elemento utilizzando l'asse x
10

rotateY(angle)

Utilizzato per ruotare, trasforma l'elemento utilizzando l'asse y
11

rotateZ(angle)

Utilizzato per ruotare trasforma l'elemento utilizzando l'asse z

Trasformazioni 3D dell'asse X.

Il seguente esempio mostra le trasformazioni 3D dell'asse 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>

Produrrà il seguente risultato:

Trasformazioni 3D dell'asse Y.

L'esempio seguente mostra le trasformazioni 3D dell'asse 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>

Produrrà il seguente risultato:

Trasformazioni 3D dell'asse Z.

Il seguente esempio mostra le trasformazioni 3D dell'asse 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>

Produrrà il seguente risultato: