Criando Passo a Passo uma Animação de Objetos 3D com HTML e CSS
Este guia fornece um passo a passo detalhado para criar e animar um cubo 3D interativo utilizando HTML e CSS, explorando conceitos essenciais de estilização, transformações tridimensionais e animações para obter um resultado visual impressionante.
Conteudo
1. Estrutura do Documento HTML
Crie um documento HTML básico com os seguintes elementos:
- Uma classe principal chamada
cube, que representará o cubo. - Uma classe chamada
top, que será a parte superior do cubo. - Uma div contendo 4 spans, com variáveis CSS
--i:0;,--i:1;,--i:2;,--i:3;, que representarão os lados do cubo.
Exemplo de Código HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animação de Cubo 3D com CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cube">
<div class="top"></div>
<div>
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
</div>
</body>
</html>
2. Estrutura do Documento CSS
Reset CSS
O reset CSS remove os valores padrão aplicados pelo navegador, garantindo consistência no layout.
/* Reset dos valores padrão */
* {
margin: 0; /* Remove margens padrão */
padding: 0; /* Remove espaçamentos padrão */
box-sizing: border-box; /* Inclui borda e preenchimento no cálculo da largura/altura */
}
box-sizing: Garante que a largura e altura incluam bordas e preenchimentos.margin: Define a margem externa de um elemento.padding: Define o espaçamento interno entre o conteúdo e a borda do elemento.
Estilização do Corpo da Página (body)
Use Flexbox para centralizar o conteúdo.
body {
display: flex; /* Ativa o modelo flexível */
justify-content: center; /* Alinhamento horizontal ao centro */
align-items: center; /* Alinhamento vertical ao centro */
min-height: 100vh; /* Ocupa 100% da altura da tela */
background-color: #050505; /* Cor de fundo */
}
justify-content: Alinha os elementos no eixo horizontal.align-items: Alinha os elementos no eixo vertical.min-height: Define altura mínima, ajustando ao tamanho da tela.background-color: Define a cor de fundo.
3. Estilização do Cubo e Animação
Estilização do Cubo (.cube)
.cube {
position: relative;
width: 300px;
height: 300px;
transform-style: preserve-3d;
animation: animado 5s linear infinite;
}
@keyframes animado {
0% {
transform: rotateX(-30deg) rotateY(0deg);
}
100% {
transform: rotateX(-30deg) rotateY(360deg);
}
}
position: relative: A posição é ajustada em relação ao local padrão no documento.transform-style: preserve-3d: Mantém o efeito 3D nos elementos filhos.animation: Controla a animação:animado: Nome da animação.5s: Duração de 5 segundos.linear: Animação com velocidade constante.infinite: A animação repete indefinidamente.
Explicação do @keyframes
rotateX(-30deg): Inclina o cubo -30 graus no eixo X.rotateY(0deg)→rotateY(360deg): Rotação completa no eixo Y.
Estilização da Div que Contém os Spans
.cube div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
position: absolute: Posiciona em relação ao elemento pai posicionado.top: 0eleft: 0: Define a posição inicial no canto superior esquerdo.transform-style: preserve-3d: Mantém os elementos filhos no espaço 3D.
Estilização dos Lados do Cubo (.cube div span)
.cube div span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#151515, #00ec00);
transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}
rotateY(calc(90deg * var(--i))): Define a rotação no eixo Y de cada lado.translateZ(150px): Desloca cada lado para a frente no eixo Z.background: Aplica um gradiente de cor.
Estilização da Parte Superior do Cubo (.top)
.top {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background: #222;
transform: rotateX(90deg) translateZ(150px);
}
rotateX(90deg): Inclina a parte superior 90 graus no eixo X.translateZ(150px): Move para a frente no eixo Z.
4. Resultado Final
Após implementar o código HTML e CSS, você verá um cubo 3D animado girando continuamente, com um gradiente visual nos lados e uma face superior destacada.
Esse exemplo pode ser expandido para incluir interações JavaScript, iluminação dinâmica e texturas mais avançadas.
