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

Com o objetivo de garantir que seu design da web seja excelente e garante aprimorar a experiência do usuário necessária para aprender como definir vários elementos HTML em sua página da web. Há muitas coisas que você pode fazer com elementos para aprimorar a aparência, como traduzir, girar ou escalar elementos no espaço 2D ou 3D.

O CSS fornece vários métodos de transformação que se enquadram na categoria de método de transformação 2D ou métodos de transformação 3D. No entanto, neste post, veremos os métodos de transformação 3D no CSS.

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

Existem vários métodos de transformação 3D no CSS; Alguns dos métodos básicos são os seguintes.

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

Os métodos acima mencionados são explicados em detalhes abaixo.

Método Tradlate3D ()

O método CSS translate3d () altera a posição de um elemento ao longo dos eixos x, y e z com base nos parâmetros atribuídos.

Sintaxe

Transform: tradutor3d (tx, ty, tz)

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

Exemplo
Suponha que você queira alterar a posição de uma imagem na dimensão 3D usando o método translate3d (), siga o exemplo abaixo.

Html

Sem tradução:

Com tradução:

No código acima, criamos dois elementos div e colocamos a mesma imagem em ambos os contêineres para demonstrar o efeito antes e depois do método translate3d ().

CSS

.div
Largura: 200px;
Altura: 100px;
margem: 30px;

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

Primeiro, estamos fornecendo ao contêiner Div alguma largura, altura e margem. Depois, estamos usando o método translate3d () para alterar a posição do segundo contêiner div.

Saída

A posição da imagem foi alterada usando com sucesso o método TRANSTE3D ().

Método girate3d ()

Com o objetivo de girar um elemento no sentido horário ou anti-horário no sentido 3D com base no grau especificado, o método girt () é 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
Para demonstrar o funcionamento do método girate3d (), usaremos o exemplo usado na seção I acima I.e. Vamos girar a imagem do cachorro ao longo dos eixos X, Y e Z.

CSS

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

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

Além de definir a largura, a altura e a margem do elemento div, também estamos ajustando sua perspectiva. A propriedade em perspectiva define a visão de perspectiva de um elemento na dimensão 3D. Por fim, estamos girando o segundo recipiente de div, especificando os valores de eixos x, y e z e o ângulo.

Saída

A imagem foi girada com sucesso na dimensão 3D.

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 funcione, use -o junto com outros métodos de transformação, como girar e perspectiva.

Sintaxe

Transform: escala3D (SX, SY, SZ)

Os eixos X, Y e Z são representados por parâmetros SX, SY e SZ.

Exemplo
Vamos ver o que acontece com a imagem do cachorro ao usar o método Scale3D ().

CSS

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

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

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

A imagem do cachorro foi escalada.

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

Os valores de diferentes métodos podem ser atribuídos aos parâmetros correspondentes.

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, -45deg) escala3D (1, 1, 1);

Estamos nos movendo, girando e escalando a imagem de uma só vez.

Saída

O método Matrix3d ​​() está funcionando corretamente.

Outros métodos de transformação 3D foram explicados na tabela a seguir.

Método	Descrição
Método Tradratex (x)	Altera a posição de um elemento ao longo do eixo x.
Método traduzido (y)	Altera a posição de um elemento ao longo do eixo y
Método Tradratez (Z)	Altera a posição de um elemento ao longo do eixo z
Método giratex (x)	Gira um elemento ao longo do eixo x.
Método giratey (y)	Gira um elemento no eixo y.
Método Rotatez (Z)	Gira um elemento ao longo do eixo z.
Método Scalex (x)	Escala o elemento no eixo x.
Método Scaley (y)	Escala o elemento no eixo y.
Método Scalez (Z)	Escala um elemento ao longo do eixo z.
Método de perspectiva (n)	Ele define a visão de perspectiva de um elemento no espaço 3D.

Conclusão

Para posicionar, girar e escalar elementos ao longo dos eixos X, Y e Z, existem vários métodos de transformação 3D disponíveis no CSS. Os métodos básicos de transformação 3D no CSS são translate3d (), scale3d (), girate3d () e matrix3d ​​(). O método TRANK3D () é usado para alterar a posição de um elemento, o método girate3d () é usado para girar um elemento na dimensão 3D, o método Scale3D () é usado para alterar o tamanho de um elemento e Matrix3d ​​() O método é usado para executar todas essas tarefas de uma só vez. Todos esses métodos são explicados em profundidade, juntamente com exemplos relevantes neste guia.