Transformações 3D: rotateX rotateY translateZ
Gire e mova elementos no espaço tridimensional usando funções de transformação 3D do CSS.
Transformações 3D: rotateX rotateY translateZ é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
Visão geral das transformações 3D
As transformações 3D de CSS estendem o sistema 2D para uma terceira dimensão usando o eixo Z. Habilite o 3D com perspective no elemento pai e transform-style: preserve-3d para elementos 3D aninhados.
rotateX()
rotateX(angle) gira um elemento em torno do eixo X horizontal, como ao virar uma página na sua direção ou para longe de você.
<div class="page"><div class="leaf">Leaf</div></div>rotateY()
rotateY(angle) gira em torno do eixo Y vertical, como ao abrir uma porta em suas dobradiças.
<div class="card-flip demo-active"><div class="card">Card</div></div>rotateZ()
rotateZ(angle) é idêntica à função 2D rotate(): realiza a rotação no plano da tela.
rotate3d()
rotate3d(x, y, z, angle) gira em torno de um vetor de eixo 3D personalizado. Os valores x, y e z definem a direção do eixo.
<div class="element">3D</div>translateZ()
translateZ() move um elemento em direção ao observador ou para longe dele ao longo do eixo Z. Valores positivos aproximam o elemento; valores negativos afastam-no.
<div class="scene-z">
<div class="layer-front">Front</div>
<div class="layer-back">Back</div>
</div>translate3d()
translate3d(x, y, z) move um elemento ao mesmo tempo nos três eixos. Utilizar translateZ(0) força a promoção para uma camada da GPU, uma técnica comum de desempenho.
<div class="animated">GPU layer</div>scale3d()
scale3d(x, y, z) dimensiona em três dimensões. scaleZ() dimensiona a profundidade, sendo útil para as faces de um cubo 3D.
Exemplo de cubo 3D
Construção de um cubo usando transformações 3D em seis faces:
<div class="cube-scene">
<div class="cube">
<div class="cube-face front">Front</div>
<div class="cube-face back">Back</div>
<div class="cube-face left">Left</div>
<div class="cube-face right">Right</div>
<div class="cube-face top">Top</div>
<div class="cube-face bottom">Bottom</div>
</div>
</div>Efeito 3D de paralaxe
Usar translateZ em elementos filhos cria profundidade em uma cena 3D rolável, produzindo paralaxe com CSS:
<div class="parallax-scene">
<div class="far-layer">Far layer</div>
<div class="close-layer">Close layer</div>
</div>Aceleração de hardware
As transformações 3D, até mesmo as triviais como translateZ(0), forçam o elemento a usar sua própria camada da GPU. Isso evita a pintura durante a animação, mas utiliza memória da GPU. Utilize essa técnica intencionalmente, não como uma solução genérica.
Verificação rápida
Qual função de transformação move um elemento ao longo do eixo Z, em direção ao observador ou para longe dele?
Recapitulação
As transformações 3D de CSS usam rotateX/Y/Z() para girar em torno de cada eixo e translateZ() para movimentar em profundidade. Habilite o 3D verdadeiro com perspective no elemento pai e transform-style: preserve-3d. Utilize backface-visibility: hidden para efeitos de cartões que viram. As transformações 3D forçam a promoção para camadas da GPU, permitindo animações suaves.
Perguntas Frequentes
A aula “Transformações 3D: rotateX rotateY translateZ” é grátis?
Sim — o texto completo de “Transformações 3D: rotateX rotateY translateZ” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Transformações 3D: rotateX rotateY translateZ”?
Gire e mova elementos no espaço tridimensional usando funções de transformação 3D do CSS. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Transformações 3D: rotateX rotateY translateZ”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Translate, Rotate e Scale
- Transformações Skew e Matrix
- Origem da Transformação e Perspectiva
- Transformações 3D: rotateX rotateY translateZ