A função CSS translateZ() adiciona profundidade a um elemento, aproximando-o ou afastando-o no espaço. Em outras palavras, desloca um elemento ao longo do eixo Z em um espaço 3D.
.box:hover {
transform: translateZ(100px);
}
.box.perspective:hover {
transform: perspective(500px) translateZ(100px);
} A função perspective() ou a propriedade ###CODE_2318c478d102bf81d4c199196d5cf964### são necessárias para translateZ() para funcionar. Sem qualquer um deles, não há efeito.
Ative a chave na demonstração a seguir e passe o mouse sobre a caixa para vê-la mais próxima:
Embora pareça que o elemento .box está ficando maior” ao passar o mouse, não é isso que está acontecendo. Quando você passa o mouse sobre a caixa, ela na verdade se move mais perto de você por um comprimento de 100 pixels, fazendo com que parece maior. Falaremos mais sobre isso em breve, para que fique mais óbvio o que está acontecendo lá.
translateZ() não deve ser confundido com uma alternativa à função scale() ou ###CODE_05ecc15aa3064af6bedcbb9c366a1dc6### propriedade. Perspectiva e escala são dois conceitos diferentes.
A função translateZ() é definida na especificação CSS Transform Module Nível 2
Sintaxe
translateZ() = translateZ(<length>) A função translateZ() recebe um único argumento <length> que define a que distância o elemento está da frente da tela. É usado com a propriedade transform
Argumentos
/* Positive lengths */
transform: translateZ(100px);
transform: translateZ(5rem);
/* Negative lengths */
transform: translateZ(-50px);
transform: translateZ(-8em); A função translateZ() recebe um único argumento:
-
<length>: a distância do elemento da frente da tela. Quando é positivo, o elemento se aproxima do usuário e se afasta quando é negativo.
Como funciona
A função translateZ() é complicada porque move um elemento ao longo do eixo Z, o que não é visualmente perceptível em um navegador por padrão. Como os navegadores renderizam elementos apenas pela altura e largura, e não pela profundidade, a função translateZ() pode parecer não fazer nada.
Para mostrar sua profundidade e projeção, precisamos usar a propriedade ###CODE_2318c478d102bf81d4c199196d5cf964### ou a função perspective() . Além disso, podemos definir o valor transform-style como preserve-3d em seu pai, o que permite ao CSS saber que os elementos filhos devem ser posicionados em 3D.
Projeção e perspectiva
Em um site, não há uma sensação de profundidade — isto é, “proximidade” ou “afastamento” — já que os elementos são achatados em uma tela 2D. Seja translate(200px) ou translate(20px), percebemos o elemento à mesma distância, portanto, não há perspectiva alguma, a menos que o habilitemos explicitamente. Para mostrar isso, tome por exemplo o seguinte HTML:
<div class="scene">
<div class="parent">
<div class="box">translateZ(100px)</div>
</div>
</div>Primeiramente, vamos permitir alguma perspectiva em toda a cena:
.scene {
perspective: 800px;
} Em seguida, definiremos ###CODE_76adce438c9a4b713f43a71465177608### para preserve-3d no pai, para que os filhos também sejam transformados em 3D:
.parent {
transform-style: preserve-3d;
} Agora movemos o .box 100px para mais perto do usuário usando translateZ().
.box {
transform: translateZ(100px);
} Embora pareça que a caixa cresceu 100px de tamanho, ao girar o pai para o lado, você verá que o .box tamanho não aumentou, mas é a distância entre o .parent e o .box que fez isso.
perspective vs.
Ambos fazem o mesmo trabalho: definem a projeção do elemento. A propriedade perspective é aplicada ao pai para todos os elementos 3D, enquanto a função perspective() só pode ser aplicada a um único 3D elemento e deve ser declarado antes da função de transformação 3D.
A propriedade perspective
.parent {
perspective: 800px;
}
.child-1 {
transform: translateZ(200px); /* Defined within a projection of 800px */
}
.child-2 {
transform: translate3D(100px, 200px, 150px); /* Defined within a projection of 800px */
} A perspective() função
.element {
transform: translateZ(100px) perspective(800px); /* Nope ❌ */
}
.element {
transform: perspective(800px) translateZ(100px); /* Yep ✅ */
}Também pode ser usado para otimizar o desempenho da web
Você sabia que pode usar a função translateZ() para aumentar o desempenho do nosso site? As funções de transformação CSS 3D usam a GPU , que é mais rápida e superior à CPU para renderização de elementos. Este hack de desempenho evita oscilações durante as animações e torna as transições mais suaves.
Os desenvolvedores adicionam translateZ(0) para mudar a renderização da CPU para a GPU, melhorando o desempenho. Se você está enfrentando problemas com uma animação, agora você tem uma maneira de consertá-la!
Demonstração
Especificação
A função translateZ() é definida na especificação CSS Transform Module Level 2 .
Suporte ao navegador
A função translateZ() está disponível em todos os navegadores modernos.
Referências
- Truques para usar CSS translateZ e perspective() por William Le
Mais sobre transformações 3D!
Artigo
ligado
9 de setembro de 2020
Como funciona a perspectiva CSS
Artigo
ligado
12 de maio de 2022
Um CSS Slinky em 3D? Desafio aceito!
translateZ() originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.
