CSS3 - Transformations 2D

Les transformations 2D sont utilisées pour modifier la structure de l'élément en tant que translation, rotation, mise à l'échelle et inclinaison.

Le tableau suivant contient des valeurs communes utilisées dans les transformations 2D -

N ° Sr. Valeur et description
1

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

Utilisé pour définir les transformations matricielles avec six valeurs
2

translate(x,y)

Utilisé pour transformer l'élément avec l'axe des x et l'axe des y
3

translateX(n)

Utilisé pour transformer l'élément avec l'axe des x
4

translateY(n)

Utilisé pour transformer l'élément avec l'axe y
5

scale(x,y)

Utilisé pour changer la largeur et la hauteur de l'élément
6

scaleX(n)

Utilisé pour changer la largeur de l'élément
sept

scaleY(n)

Utilisé pour changer la hauteur de l'élément
8

rotate(angle)

Utilisé pour faire pivoter l'élément en fonction d'un angle
9

skewX(angle)

Utilisé pour définir les transformations obliques avec l'axe des x
dix

skewY(angle)

Utilisé pour définir les transformations obliques le long de l'axe y

Les exemples suivants sont un exemple de toutes les propriétés ci-dessus.

Rotation de 20 degrés

Rotation de la boîte avec un angle de 20 degrés comme indiqué ci-dessous -

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

Il produira le résultat suivant -

Rotation de -20 degrés

Rotation de la boîte avec un angle de -20 degrés comme indiqué ci-dessous -

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

Il produira le résultat suivant -

Incliner l'axe X

Rotation de la boîte avec axe x incliné comme indiqué ci-dessous -

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

Il produira le résultat suivant -

Incliner l'axe Y

Rotation de la boîte avec axe y oblique comme indiqué ci-dessous -

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

Il produira le résultat suivant -

Transformation matricielle

Rotation de la boîte avec les transformations Matrix comme indiqué ci-dessous -

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

Il produira le résultat suivant -

Matrix se transforme dans une autre direction.

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

Il produira le résultat suivant -