CSS Transform Translate | Explicado

Ao desenvolver qualquer aplicativo, os desenvolvedores precisam manter o design do site atraente e interativo. Para fazer isso, várias propriedades CSS podem ser utilizadas, como transição, animação e muito mais. Mais especificamente, o “transformar”Propriedade posiciona o elemento no eixo x, eixo y e zis z.

Este artigo explicará a propriedade CSS Transform com a função Value Translate ().

Cenário de exemplo

Para a demonstração, criaremos duas imagens empilhadas uma sobre a outra. O primeiro será estático e ligeiramente opaco, enquanto o outro será móvel. Além disso, o “transformar”A propriedade é aplicada ao segundo elemento para que se mova em relação à imagem opaca.

Etapa 1: Adicione imagens em HTML

Em HTML, primeiro, crie um elemento div com o nome da classe “conteúdo principal”. Dentro deste elemento div, adicione outra div com o nome da classe “move-img”. Dentro deste elemento div, adicione dois elementos, cada um com atributos:

• ““src”Atributo especifica o caminho da imagem.
• ““aula”O valor do atributo é adicionado para acessar o elemento relevante no CSS.
• ““alt”Especifica o texto que será exibido se a imagem falhar ao fazer upload.
• ““largura”Propriedade define a largura do elemento HTML adicionado.

Aqui está o código HTML:

Etapa 2: Aplicando CSS

Vamos avançar para aplicar propriedades de estilo CSS aos elementos HTML.

Elemento de "corpo" de estilo

corpo
Background-Color: #B4CDE6;

O "cor de fundo”A propriedade é aplicada para definir a cor de fundo do elemento corporal.

Estilo “move-img” div

.Move-IMG
Posição: relativa;
Largura: 300px;
margem: automático;
Margin-top: 40px;

O "move-img”O elemento div é aplicado com as seguintes propriedades CSS:

• ““posição”Propriedade com o valor“relativo”Define a posição do elemento em relação à sua posição normal.
• ““largura”Propriedade define a largura do elemento.
• ““margem”A propriedade é utilizada para definir a altura do elemento.
• ““margin-top”Propriedade especifica o espaço no topo do conteúdo do elemento.

Estilo “img-1” div

.IMG-1
Posição: Absoluto;
Opacidade: 0.12;

O "IMG-1”Div é estilizado da seguinte maneira:

• ““posição”Propriedade com o valor“absoluto”Positará o elemento em relação ao seu elemento pai posicionado mais próximo.
• ““opacidade”Especifica a transparência do elemento.

Estilo “img-2” div

.IMG-2
Posição: Absoluto;

Da mesma maneira, posicionamos o “IMG-2”Div.

Saída

Como transformar a posição do objeto em html?

O "transformarA propriedade nos permite girar, distribuir, escalar ou traduzir um elemento. Mais especialmente, o “traduzir()”A função ajusta a posição do elemento no eixo x, y e z. A funcionalidade do “traduzir”Propriedade é a mesma da função de tradução () usada com a propriedade Transform.

Quais são os diferentes valores da propriedade "transformar"?

Existem vários valores de tradução associados à propriedade CSS Transform:

• traduzir()
• translatex ()
• Tradlatey ()
• Tradratez ()
• Tradlate3D ()

Confira o exemplo fornecido para entender seu uso!

Exemplo 1: Usando "Tradle ()" com a propriedade "Transform"

O "traduzir()”A função leva dois valores de parâmetros. O primeiro representa o valor do eixo x, e o segundo valor representa o eixo y:

Transform: traduzir (100px, 100px);

Pode -se observar que, de acordo com os valores especificados, o elemento é reposicionado horizontal e verticalmente:

Exemplo 2: Usando "transllatex ()" com a propriedade "Transform"

Para mover o objeto horizontalmente, utilize o “translatex ()”Função. Como resultado, o valor positivo moverá o objeto para o lado direito e o valor negativo moverá o objeto para o lado esquerdo:

Transform: translatex (100px);

Pode -se observar que o objeto foi movido 100px à direita:

Exemplo 3: Usando "Tradley ()" com a propriedade "Transform"

Para mover o objeto verticalmente, use o “Tradlatey ()”Função. De acordo com seus parâmetros, o valor positivo moverá o objeto para o fundo e o valor negativo o moverá em direção ao topo:

Transform: tradutor (90px);

Saída

Exemplo 4: Usando "Tradratez ()" com a propriedade "Transform"

O Tradlatex () e o tradutor () são bastante simples de entender, pois transformam os elementos em termos do eixo x e y, respectivamente. O "Tradratez ()”A função é de alguma forma complicada. O eixo x e o eixo y move o elemento horizontal ou verticalmente, enquanto o eixo z move o objeto para mais perto ou longe de você.

Passar o valor positivo como parâmetro de função traduz ()

Você pode utilizar a função tradmatez () da seguinte forma:

Transform: Perspective (200px) Translatez (50px);

Aqui:

• ““perspectiva()”: Esta função define um espaço virtual entre a tela e o elemento HTML.
• ““Tradratez ()”: Esse valor positivo nesta função leva o elemento mais próximo de você, enquanto o valor negativo afasta o elemento de você.

Pode -se observar que agora a imagem se aproxima da tela e parece maior:

Passando o valor negativo como parâmetro de função traduz ()

Agora, vamos especificar o valor negativo como o parâmetro da função translatez ():

Transform: Perspective (200px) Translatez (-50px);

O valor negativo moveu o elemento para longe de nós:

Motivo de objeto na direção 3-D

Para mover o objeto em uma direção 3D, utilize o “Tradlate3D ()”Função. É preciso o valor como parâmetros do eixo x, eixo y e do eixo z. Além disso, o “perspectiva()”O valor especifica o espaço entre o elemento e a tela para que a imagem possa se mover em um plano 3D:

Transformação: Perspectiva (500px) TRADLE3D (150px, 30px, 130px);

A saída representa o movimento do objeto em 3-D:

Isso se tratava de CSS Transform Property com a função TRANSTE () no CSS.

Conclusão

CSS “transformar”Propriedade com o valor“traduzir()”Posicionou os elementos no eixo x, eixo y e eixo z. Esses valores podem ser positivos ou negativos. O "translatex ()" e "Tradlatey ()”As funções posicionaram os objetos horizontal e verticalmente. O "Tradratez ()”A função leva o objeto para mais perto ou para longe da tela. É combinado com o “perspectiva()”Função, que especifica um espaço entre a tela e o elemento. Este artigo demonstrou a propriedade CSS Transform com a função TRANSTE ().