CSS3 - Trasformazioni 2d

Le trasformazioni 2D vengono utilizzate per modificare nuovamente la struttura dell'elemento come traslazione, rotazione, scala e inclinazione.

La tabella seguente contiene valori comuni che vengono utilizzati nelle trasformazioni 2D:

Sr.No. Valore e descrizione
1

matrix(n,n,n,n,n,n)

Utilizzato per definire trasformazioni di matrice con sei valori
2

translate(x,y)

Utilizzato per trasformare l'elemento insieme all'asse xe all'asse y
3

translateX(n)

Utilizzato per trasformare l'elemento insieme all'asse x
4

translateY(n)

Utilizzato per trasformare l'elemento insieme all'asse y
5

scale(x,y)

Utilizzato per modificare la larghezza e l'altezza dell'elemento
6

scaleX(n)

Utilizzato per modificare la larghezza dell'elemento
7

scaleY(n)

Utilizzato per modificare l'altezza dell'elemento
8

rotate(angle)

Utilizzato per ruotare l'elemento in base a un angolo
9

skewX(angle)

Utilizzato per definire le trasformazioni di inclinazione lungo l'asse x
10

skewY(angle)

Utilizzato per definire le trasformazioni di inclinazione lungo l'asse y

I seguenti esempi sono mostrati il ​​campione di tutte le proprietà di cui sopra.

Ruota di 20 gradi

Rotazione della scatola con un angolo di 20 gradi come mostrato di seguito -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Produrrà il seguente risultato:

Ruota di -20 gradi

Rotazione della scatola con angolo di -20 gradi come mostrato di seguito -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Standard syntax */	
            transform: rotate(-20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Produrrà il seguente risultato:

Inclina l'asse X.

Rotazione box con asse x inclinato come mostrato di seguito -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Standard syntax */	
            transform: skewX(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Produrrà il seguente risultato:

Inclina l'asse Y.

Rotazione box con asse y inclinato come mostrato di seguito -

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Standard syntax */	
            transform: skewY(20deg);
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "skewDiv">
         Tutorials point.com
      </div>
   </body>
</html>

Produrrà il seguente risultato:

Trasformata di matrice

La rotazione del riquadro con trasformazioni Matrix si trasforma come mostrato di seguito

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Standard syntax */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv1">
         Tutorials point.com
      </div>
   </body>
</html>

Produrrà il seguente risultato:

Matrix si trasforma con un'altra direzione.

<html>
   <head>
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Standard syntax */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
   </head>

   <body>
      <div>
         Tutorials point.com.
      </div>
      
      <div id = "myDiv2">
         Tutorials point.com
      </div>
   </body>
</html>

Produrrà il seguente risultato: