Módulo 17: A Terceira Dimensão (3D)
2. Resumo da Aula Anterior
No Módulo 16, aprendemos a criar transparências elegantes com o Glassmorphism. Agora, vamos tirar os elementos do plano "chato" do ecrã e dar-lhes profundidade real.
3. O Que Vais Aprender Hoje
- ✅ O eixo Z (a profundidade).
- ✅ A propriedade perspective (o olho do observador).
- ✅ Rotações dinâmicas em 3D (rotateX, rotateY).
- ✅ Criar um efeito de cubos e cartas que rodam.
4. Teoria: Sair do Papel
Conceito: No CSS 2D, temos apenas largura (X) e altura (Y). No CSS 3D, introduzimos o eixo Z, que permite que os elementos venham "para a frente" ou vão "para trás" no ecrã. Para que isto pareça real, precisamos de definir uma perspetiva, caso contrário o cérebro humano não percebe a profundidade.
📦 Analogia: O Cinema vs. O Teatro
Imagina que estás a ver uma peça:
- Ecrã 2D (Cinema): Tudo acontece numa tela plana. Se um boneco rodar, ele apenas parece que se está a espremer.
- Espaço 3D (Teatro): O palco tem profundidade. Tu estás sentado na plateia (Perspetiva). Quando um ator roda, tu vês os lados e as costas dele porque ele está num espaço real. Se te aproximares do palco (mudar o valor de perspective), tudo parece maior e mais dramático!
5. Exemplos Práticos
Exemplo 1: Preparar o Palco
A perspetiva deve ser definida no elemento PAI.
.palco-3d {
perspective: 1000px; /* Quanto menor o valor, mais extremo o efeito */
}
.cartao {
transform: rotateY(45deg); /* Roda como uma porta a abrir */
transition: transform 0.5s;
}Sem o perspective no pai, o rotateY pareceria apenas um achatamento horizontal do cartão.
Exemplo 2: Preservar o 3D nos Filhos
Como fazer com que sub-elementos também rodem no espaço.
.contentor-pai {
transform-style: preserve-3d;
}
.filho {
transform: translateZ(50px); /* O filho "salta" para fora do ecrã */
}O preserve-3d garante que os filhos não sejam "esborrachados" contra o pai como se fossem um autocolante.
6. Agora é a Tua Vez!
Vamos criar o efeito "Card Flip" (Carta que Roda):
- Cria uma
<div>chamadacard-3d. - No CSS, dá-lhe uma largura e altura, e define a propriedade
transform-style: preserve-3d;. - Adiciona um efeito de
:hoverque fazrotateY(180deg). - Cria dois elementos lá dentro:
frenteeverso. - Usa
position: absolute;para os sobrepores. - No
verso, usatransform: rotateY(180deg)para ele ficar "escondido" atrás. - Usa
backface-visibility: hidden;em ambos para que o verso não se veja através da frente!
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 O eixo Z adiciona a dimensão de profundidade.
- 📌 Perspective define quão perto o utilizador está da cena.
- 📌 preserve-3d permite hierarquias complexas no espaço.
- 📌 backface-visibility controla se vemos o "avesso" dos elementos.
9. Desafios Práticos
Desafio 1: O Eixo do Mal
Qual a função para fazer um elemento rodar como o ponteiro de um relógio, mas no plano 3D (olhando de frente)?
Desafio 2: Extrema Perspetiva
Se definires perspective: 10px;, o efeito será mais sutil ou mais exagerado do que perspective: 1000px;?
Desafio 3: O Fantasma do Verso
Como se chama a propriedade que impede que vejamos o conteúdo de um botão quando ele está rodado de costas para nós?