Como mover, girar, escalar e distorcer elementos no CSS?

Web designers geralmente desejam fazer algumas coisas interessantes com os elementos que aparecem em seu site para tornar seu design de web atraente. A propriedade CSS Transform permite que você se mova, gire, escala e distorçam elementos ao longo de eixos x e y ou ao longo de eixos x, y e z. Esta propriedade consiste em certos métodos que permitem executar essas tarefas facilmente. Esses métodos são amplamente classificados em dois grupos que são os seguintes.

1. Métodos de transformação 2D
2. Métodos de transformação 3D

Vamos aprender em detalhes.

Métodos de transformação 2D

Para mover, girar, escalar e distorcer elementos ao longo do eixo x e o eixo y, o CSS fornece vários métodos que se enquadram na categoria de métodos de transformação 2D. Aqui listamos alguns métodos básicos de transformação 2D para você.

1. Método Tradle ()
2. Método girate ()
3. Método Scale ()
4. Método Skew ()
5. Método Matrix ()

Abaixo, explicamos esses métodos em detalhes.

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)

Os parâmetros tx e ty representam os eixos x e y.

Exemplo
Suponha que você queira mover uma imagem para uma determinada posição usando o método translate (). Aqui está o código relevante.

Html

Sem tradução:

Com tradução:

Aqui criamos dois elementos div e colocamos uma imagem em ambos.

CSS

.div
Largura: 50px;
margem: 20px;

.traduzir
Transform: traduzir (30px, 30px);

Além de dar alguma largura e margem aos elementos da div, estamos aplicando o método traduz () na segunda imagem.

Saída

A imagem foi movida com sucesso usando o método tradutor ().

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 (rx, ry, graus)

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

Exemplo
Suponha que você queira girar um recipiente de div, tanto no sentido horário quanto no sentido anti-horário. Use o método girate ().

Html

Contêiner normal de div.


Girado 30 graus no sentido horário.

R
Girado 30 graus no sentido anti-horário.

Para demonstrar o funcionamento do método girtate (), três contêineres de div foram definidos.

CSS

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

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

.anticlockwise
Transformar: girar (-30deg);

No código acima, estamos girando a segunda div 30 graus no sentido horário e a terceira div 30 graus anti-horário. Valores negativos são usados ​​para girar um elemento no sentido anti-horário.

Saída

O método rotativo está funcionando corretamente.

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)

Os eixos x e y são definidos pelo SX e o parâmetro sy.

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

Html

Tamanho original do contêiner div
O tamanho do recipiente da div é aumentado uma e meia de sua largura original e altura.

Simplesmente criamos dois elementos div.

CSS

div
Largura: 200px;
Altura: 100px;
margem: 50px;
Background-Color: Rosybrown;
borda: 1px preto sólido;

.escala
Transformar: escala (1.5,1.5);

Estamos usando o método escala () para aumentar a largura e a altura do elemento uma e meia.

Saída

O tamanho do contêiner Div foi escalado usando o método escala ().

Método Skew ()

O método SKEW () inclina-se um elemento horizontalmente (ao longo do eixo x) e verticalmente (ao longo do eixo y) com base nos graus especificados.

Sintaxe

Transformar: Skew (SX, SY)

Ou,

Transformar: Skew (SX)

As duas dimensões são representadas pelo SX e os parâmetros SY.

Exemplo
Suponha que você queira distorcer um elemento horizontal e verticalmente, considere o exemplo abaixo.

Html

Contêiner original da div.


Este recipiente de div está distorcido em 8 graus horizontalmente e 9 graus verticalmente.

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

CSS

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

.Skew
Transform: Skew (8deg, 9deg);

Estamos distorcendo o segundo recipiente de divisão de 8 graus ao longo do eixo x e 9 graus ao longo do eixo y.

Saída

O elemento foi distorcido com sucesso.

Método Matrix ()

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

Sintaxe

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

Os valores dos respectivos métodos podem ser atribuídos como parâmetros.

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

Html

Contêiner original da div.


Depois de usar o método First Matrix ().


Depois de usar o método Second Matrix ().

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

CSS

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

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

.Matrix2
Transformar: Matrix (1, 0, 0.4, 1, 120, 0);

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

Saída

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

Agora que aprendemos sobre os métodos de transformação 2D, vamos explorar os métodos de transformação 3D.

Métodos de transformação 3D

Para mover, girar e escalar e distorcer elementos ao longo do eixo x, o eixo y e o eixo z, o CSS fornece vários métodos que são chamados de métodos de transformação 3D. Os métodos fundamentais de transformação 3D são os seguintes

1. Método Tradlate3D ()
2. Método girate3d ()
3. Método Scale3D ()
4. Método Matrix3d ​​()

Nós explicamos esses métodos em detalhes abaixo.

Método Tradlate3D ()

O método usado para alterar a posição de um elemento ao longo dos eixos x, y e z com base nos parâmetros atribuídos é referido como o método traduzente3d ().

Sintaxe

Transform: tradutor3d (tx, ty, tz)

As três dimensões são representadas pelos parâmetros TX, TY e TZ.

Exemplo
Suponha que você queira mudar a posição de uma imagem ao longo dos três eixos. Use o método tradutor3d ().

Html

Sem tradução:

Com tradução:

A mesma imagem foi colocada em ambos os contêineres para demonstrar o efeito antes e depois do método tradutor3d ().

CSS

.div
Largura: 50px;
margem: 20px;

.traduzir
Transform: tradutor3d (25px, 25px, 40px);

Estamos usando o método translate3d () para alterar a posição do segundo contêiner div.

Saída

A imagem foi traduzida usando o método TRANSTE3D ().

Método girate3d ()

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

Sintaxe

Transformar: girate3d (rx, ry, rz, graus)

Os parâmetros RX, RY e RZ definem as três dimensões, enquanto o parâmetro de graus especifica o ângulo do qual o elemento deve ser girado.

Exemplo
Suponha que você queira girar uma imagem no espaço 3D.

CSS

.div
Largura: 200px;
margem: 30px;
Perspectiva: 300px;

.girar
Transform: girate3d (0, 1, 0, 45deg);

Estamos girando o segundo recipiente de div, especificando os valores de eixos x, y e z e o ângulo. Observe que também definimos a propriedade em perspectiva como 300px, que define a visão de perspectiva de um elemento.

Saída

A imagem foi girada com sucesso.

Método Scale3D ()

Para melhorar ou reduzir o tamanho de um elemento com base na largura especificada e na altura, o método escala () é usado. Para que este método trabalhe, use -o junto com outros métodos de transformação, como girar e perspectiva.

Sintaxe

Transform: escala3D (SX, SY, SZ)

Os parâmetros acima especificam as três dimensões.

Exemplo
Vamos ver o que acontece com a mesma imagem usada no exemplo acima ao usar o método Scale3D ().

CSS

.div
Largura: 300px;
margem: 30px;
Perspectiva: 300px;

.escala
Transform: escala3d (1, 1, 1) girate3d (1, 0, 0, 60deg);

Como já mencionado, precisamos usar o método Scale3D () com outros métodos para ver seu efeito; portanto, no código acima, estamos usando -o junto com o método girate3d ().

Saída

O método Scale3D () é verificado e funcionando corretamente.

Método Matrix3d ​​()

Com o objetivo de traduzir, girar e escalar elementos de uma só vez no espaço 3D, o método Matrix () é usado. Este método gera 16 valores na forma de uma matriz 4 × 4.

Sintaxe

Transform: matrix3d ​​(m, m, m, m, m, m, m, m, m, m, m, m, m, m, m, m)

Ou,

Transform: matrix3d ​​(translate3d (), girate3d (), scale3d ())

Cada parâmetro assume o valor do respectivo método.

Exemplo
Vamos traduzir, girar e escalar a imagem do cachorro de uma só vez usando o método Matrix3d ​​().

CSS

.Matrix
Transform: Tradlate3D (10px, 10px, 20px) Groate3D (0, 1, 0, -60deg) escala3D (1, 1, 1);

A imagem está sendo traduzida, girada e escalada simultaneamente.

Saída

A imagem foi movida, girada e escalada de uma só vez.

Conclusão

Com o objetivo de mover, girar, dimensionar e distorcer um elemento, existem vários métodos disponíveis no CSS que se enquadram nas categorias de métodos de transformação 2D e métodos de transformação 3D. Os métodos translate (), girtate (), Scale (), Skew () e Matrix () são agrupados sob os métodos de transformação 2D de classificação, enquanto isso, os métodos translate3D (), Rotate3D (), Scale3D () e Matrix3d ​​() mentir no grupo de métodos de transformação 3D. Todos esses métodos são explicados em detalhes neste guia, juntamente com exemplos relevantes.