Métodos de transformação 2D em CSS

Ao projetar um site, muitas vezes é necessário posicionar, girar, escalar ou distorcer elementos HTML horizontal e verticalmente para aprimorar a vista do site. Para esse fim, podemos usar a propriedade CSS Transform que nos permite alterar a posição, tamanho ou forma de um elemento. No CSS, existem dois tipos de transformações que são uma transformação 2D e transformada 3D.

Neste guia, no entanto, vamos seguir a transformação 2D e aprender sobre os vários métodos de transformação 2D.

Métodos de transformação 2D em CSS

Existem vários métodos de transformação 2D em CSs que são os seguintes.

1. Método Tradle ()
2. Método girate ()
3. Método Scale ()
4. Método Scalex ()
5. Método Scaley ()
6. Método Skew ()
7. Método Skewx ()
8. Método Skewy ()
9. Método Matrix ()

Estes são explicados em detalhes abaixo.

Método Tradle ()

O método CSS Translate () altera a posição de um elemento ao longo do eixo x (horizontalmente) ou ao longo do eixo y (verticalmente) com base nos parâmetros atribuídos.

Sintaxe

Transformar: traduzir (tx, ty)

Ou,

Transformar: Traduzir (TX)

O tx e ty se referem aos eixos x e y.

Exemplo
Suponha que você queira mover uma imagem para uma determinada posição usando o método translate () e depois siga o exemplo abaixo.

Html

CSS

img
Largura: 250px;
Altura: 100px;
Transformar: traduzir (50px, 50px);

Saída
Sem tradução () método.

Com o método tradutor ().

O método traduz () traduz a imagem 50px da parte superior e 5-px do lado esquerdo com sucesso.

Método girate ()

Para o objetivo de girar um elemento no sentido horário ou anti-horário com base no grau especificado, o método girtate () é usado.

Sintaxe

Transformar: girar (graus)

O parâmetro de graus define o ângulo do qual o elemento deve ser girado.

Exemplo
Considere o exemplo abaixo para entender o funcionamento do método rotate ().

Html

Este é um contêiner de div normal.


Este recipiente de div é girado 25 graus no sentido horário.


Este contêiner de div é girado 25 graus anti-horário.

Aqui especificamos três contêineres de div para demonstrar o conceito do método girt ().

CSS

div
Largura: 250px;
Altura: 100px;
Background-Color: Bisque;
borda: 1px cinza sólido;

.sentido horário
Transformar: girar (25deg);

.anticlockwise
Transformar: girar (-25deg);

No código acima, estamos primeiro dando alguma largura, altura, cor de fundo e borda para os contêineres da div. Posteriormente, estamos girando a segunda div 25 graus no sentido horário e a terceira div 25 graus anti-horário. Observe que, para girar no sentido anti-horário, estamos usando valores negativos.

Saída

O método girate () foi implementado e verificado.

Método Scale ()

Para melhorar ou reduzir o tamanho de um elemento com base na largura especificada e altura, o método da escala () é usado.

Sintaxe

Transforming: Scale (SX, SY)

Ou,

Transforming: Scale (SX)

O SX e Sy representam as dimensões horizontal e vertical, respectivamente.

Exemplo
O exemplo abaixo demonstra o funcionamento do método da escala ().

Html

O tamanho do contêiner div é aumentado duas vezes de sua largura original e altura.

No código acima, simplesmente criamos um elemento div.

CSS

div
Largura: 200px;
Altura: 100px;
margem: 130px;
Background-Color: Bisque;
borda: 1px preto sólido;
transformação: escala (2,2);

Usando propriedades CSS, estamos atribuindo alguma largura, altura e margem ao elemento div e, por fim.

Saída

O tamanho do contêiner div foi aumentado usando o método da escala ().

Método Scalex ()

Para o objetivo de alterar a largura de um elemento, o método scalex () é usado.

Sintaxe

Transform: scalex (sx)

O parâmetro SX representa a dimensão horizontal de um elemento.

Exemplo
Digamos que você queira diminuir a largura de um elemento e consulte o exemplo abaixo.

CSS

div
Transformar: Scalex (0.5);

No código acima, estamos usando o método scalex () para diminuir a largura de um contêiner div.

Saída

O método scalex () está funcionando corretamente.

Método Scaley ()

Para o objetivo de alterar a altura de um elemento, o método scaley () é usado.

Sintaxe

Transforming: Scaley (SY)

O parâmetro sy define o valor do eixo y.

Exemplo

Considere o exemplo abaixo.

CSS

div
Transformar: Scaley (2);

Aqui estamos usando o método Scaley () para aumentar a altura do elemento div.

Saída

A altura do elemento div aumentou duas vezes a sua altura original.

Método Skew ()

Este método inclina um elemento horizontal e verticalmente com base nos graus especificados.

Sintaxe

Transformar: Skew (SX, SY)

Ou,

Transformar: Skew (SX)

O sx e sy representam os eixos x e y.

Exemplo
Suponha que você queira distorcer um elemento ao longo dos eixos X e Y…

Html

Este é um contêiner de div normal.


Este contêiner de div está inclinado a 10 graus horizontalmente e 15 graus verticalmente.

Aqui definimos dois contêineres da div para demonstrar o funcionamento do método SKEW ().

CSS

div
Largura: 200px;
Altura: 100px;
Background-Color: Bisque;
borda: 1px cinza sólido;

.Skew
Transform: Skew (10deg, 15deg);

Além de modelar os recipientes da div, estamos distorcendo o segundo recipiente de div 10 graus ao longo do eixo x e 15 graus ao longo do eixo y.

Saída

O contêiner Div foi distorcido horizontal e verticalmente.

Método Skewx ()

Para distorcer um elemento específico horizontalmente com base nos graus especificados, o método Skewx () é usado.

Sintaxe

Transformar: Skew (SX)

O parâmetro SX define o eixo x.

Exemplo
Suponha que você queira distorcer um elemento 15 graus horizontalmente.

CSS

.Skew
Transformar: Skewx (15deg);

Usando o método skewx (), estamos distorcendo o elemento div 15 graus horizontalmente.

Saída

O método scalex () está funcionando corretamente.

Método Skewy ()

Para distorcer um elemento específico verticalmente com base nos graus especificados, o método skewy () é usado.

Sintaxe

Transformar: Skew (SY)

O parâmetro sy define o eixo y.

Exemplo
Suponha que você queira distorcer um elemento 15 graus verticalmente.

CSS

.Skew
Transform: Skewy (15deg);

Usando o método skewx (), estamos distorcendo o elemento div 15 graus verticalmente.

Saída

O método Scaley () está funcionando corretamente.

Método Matrix ()

Com o objetivo de traduzir, girar, escalar e distorcer elementos de uma só vez, o método Matrix () é usado.

Sintaxe

Transform: Matrix (Scalex (), Skewy (), Skewx (), Scaley (), translatex (), translate ())

Você pode atribuir valores a todas as propriedades que separam as vírgulas.

Exemplo

Vamos entender o funcionamento do método Matrix () usando o seguinte exemplo.

Html

Este é um contêiner de div normal.


O contêiner Div após o uso do método Matrix ().


O contêiner Div após o uso do método Matrix ().

Para demonstrar o funcionamento do método Matrix (), criamos três elementos div.

CSS

div
Largura: 200px;
Altura: 100px;
Background-Color: Bisque;
borda: 1px cinza sólido;

.Matrix1
Transformar: Matrix (1, -0.3, 0, 1, 0, 0);

.Matrix2
Transformar: Matrix (1, 0, 0.5, 1, 150, 0);

Estamos atribuindo valores diferentes a vários parâmetros do método Matrix ().

Saída

O método da matriz está funcionando corretamente.

Conclusão

Para fins de posicionamento, rotação, escala ou elementos distorcidos ao longo do eixo X e Y, existem vários métodos de transformação 2D disponíveis no CSS. Os métodos básicos de transformação 2D no CSS são traduzidos (), girt (), escala (), skew () e matriz (). Cada um desses métodos serve a um propósito diferente que explicamos neste artigo, juntamente com um exemplo relevante.