CSS3 - transformações 2d

As transformações 2D são usadas para mudar a estrutura do elemento como translação, rotação, escala e inclinação.

A tabela a seguir contém valores comuns que são usados ​​em transformações 2D -

Sr. Não. Valor e descrição
1

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

Usado para definir transformações de matriz com seis valores
2

translate(x,y)

Usado para transformar o elemento junto com os eixos xey
3

translateX(n)

Usado para transformar o elemento junto com o eixo x
4

translateY(n)

Usado para transformar o elemento junto com o eixo y
5

scale(x,y)

Usado para alterar a largura e altura do elemento
6

scaleX(n)

Usado para alterar a largura do elemento
7

scaleY(n)

Usado para alterar a altura do elemento
8

rotate(angle)

Usado para girar o elemento com base em um ângulo
9

skewX(angle)

Usado para definir as transformações de inclinação junto com o eixo x
10

skewY(angle)

Usado para definir as transformações de inclinação junto com o eixo y

Os exemplos a seguir são mostrados a amostra de todas as propriedades acima.

Girar 20 graus

Rotação da caixa com ângulo de 20 graus conforme mostrado abaixo -

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

Isso produzirá o seguinte resultado -

Girar -20 graus

Rotação da caixa com ângulo de -20 graus conforme mostrado abaixo -

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

Isso produzirá o seguinte resultado -

Inclinar eixo X

Rotação da caixa com inclinação do eixo x conforme mostrado abaixo -

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

Isso produzirá o seguinte resultado -

Eixo Y inclinado

Rotação da caixa com inclinação do eixo y conforme mostrado abaixo -

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

Isso produzirá o seguinte resultado -

Transformação de matriz

A rotação da caixa com transformações de matriz conforme mostrado abaixo -

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

Isso produzirá o seguinte resultado -

Matrix se transforma em outra direção.

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

Isso produzirá o seguinte resultado -