CSS3 - Transformaciones 2d

Las transformaciones 2D se utilizan para volver a cambiar la estructura del elemento como trasladar, rotar, escalar y sesgar.

La siguiente tabla contiene valores comunes que se utilizan en transformaciones 2D:

No Señor. Valor y descripción
1

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

Se utiliza para definir transformaciones matriciales con seis valores.
2

translate(x,y)

Se utiliza para transformar el elemento junto con el eje xy el eje y
3

translateX(n)

Se usa para transformar el elemento junto con el eje x
4

translateY(n)

Se usa para transformar el elemento junto con el eje y
5

scale(x,y)

Se usa para cambiar el ancho y la altura del elemento.
6

scaleX(n)

Se usa para cambiar el ancho del elemento
7

scaleY(n)

Se usa para cambiar la altura del elemento.
8

rotate(angle)

Se usa para rotar el elemento según un ángulo.
9

skewX(angle)

Se utiliza para definir transformaciones sesgadas junto con el eje x
10

skewY(angle)

Se utiliza para definir transformaciones sesgadas junto con el eje y

Los siguientes ejemplos son el ejemplo de todas las propiedades anteriores.

Girar 20 grados

Rotación de la caja con un ángulo de 20 grados como se muestra a continuación:

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

Producirá el siguiente resultado:

Girar -20 grados

Rotación de la caja con un ángulo de -20 grados como se muestra a continuación -

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

Producirá el siguiente resultado:

Inclinar el eje X

Rotación de caja con eje x sesgado como se muestra a continuación:

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

Producirá el siguiente resultado:

Inclinar el eje Y

Rotación de caja con eje y sesgado como se muestra a continuación:

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

Producirá el siguiente resultado:

Transformación de matriz

La rotación de la caja con Matrix se transforma como se muestra a continuación:

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

Producirá el siguiente resultado:

Matrix se transforma con otra dirección.

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

Producirá el siguiente resultado: