Efeitos de luz | Efeitos de animação de cubo brilhante CSS 3D

Conteudo

1 Introdução ao Uso de CSS para Animações 3D
2 Estrutura do Documento HTML
- 2.1 Código HTML:
3 Estilização com CSS
- 3.1 Reset CSS
- 3.2 Corpo da Página (body)
4 Estilização do Cubo e Animação
5 Resultado Final
- 5.1 Referências

Introdução ao Uso de CSS para Animações 3D

O CSS é uma ferramenta poderosa que vai além da estilização estática de elementos em páginas web. Ele permite criar animações dinâmicas e interativas, proporcionando experiências visuais incríveis, como o efeito de um cubo 3D animado. Por meio de propriedades como transform, animation e keyframes, é possível criar movimentos suaves, rotações tridimensionais e efeitos de perspectiva, tudo isso sem o uso de JavaScript ou bibliotecas externas.

No exemplo do cubo 3D, exploramos como o CSS pode manipular o espaço tridimensional para dar profundidade aos elementos. Combinando propriedades como transform-style: preserve-3d e translateZ, conseguimos posicionar os lados do cubo no espaço 3D, enquanto rotateX e rotateY criam o movimento contínuo. Além disso, utilizamos gradientes e cores para dar um toque de brilho e modernidade à animação.

Essa abordagem não só demonstra a flexibilidade do CSS, mas também reforça como é possível criar interfaces inovadoras e visuais impressionantes com código simples e otimizado. Vamos explorar passo a passo a construção dessa animação para entender melhor como cada propriedade funciona e como elas se combinam para formar o efeito final.

Este guia detalhado mostrará como criar um cubo 3D interativo utilizando apenas HTML e CSS, explorando conceitos como transformações tridimensionais e animações. Você aprenderá passo a passo como implementar o código e aplicar estilizações para obter um resultado visual impressionante.

Estrutura do Documento HTML

A estrutura HTML define os elementos básicos para o cubo.

Classe principal: cube representa o cubo.
Classe superior: top define a parte superior do cubo.
Elementos internos: Quatro span com variáveis CSS (--i:0, --i:1, --i:2, --i:3) representam os lados do cubo.

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>

Estilização com CSS

Reset CSS

Para garantir consistência no layout, aplicamos um reset CSS.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

margin e padding removem espaçamentos padrão.
box-sizing: border-box; inclui borda e preenchimento no cálculo de largura e altura.

Corpo da Página (`body`)

Centralizamos o cubo usando Flexbox e aplicamos um fundo escuro.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #050505;
}

display: flex; ativa o modelo Flexbox.
justify-content e align-items centralizam horizontal e verticalmente.
min-height: 100vh; ajusta a altura ao tamanho da tela.
background-color define a cor de fundo.

Estilização do Cubo e Animação

Classe Cubo (`.cube`)

A classe principal define o tamanho e o comportamento animado do cubo.

.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);
  }
}

transform-style: preserve-3d; mantém o efeito tridimensional.
animation controla a rotação do cubo:
- 5s é o tempo da animação.
- linear aplica velocidade constante.
- infinite repete continuamente.

Div Interna (`.cube div`)

Essa camada organiza os lados do cubo.

.cube div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

position: absolute; posiciona em relação ao pai.
transform-style: preserve-3d; preserva o espaço tridimensional.

Lados do Cubo (`.cube div span`)

Cada lado é representado por um span com rotação e deslocamento.

.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))) gira cada lado no eixo Y.
translateZ(150px); desloca para frente.
background aplica gradiente de cor.

Parte Superior (`.top`)

A face superior é rotacionada para ficar no topo.

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: #222;
  transform: rotateX(90deg) translateZ(150px);
}