Efeito de Cubo Giratório 3D com CSS

Se você está buscando adicionar um toque de dinamismo e interatividade ao seu site, a criação de animações em 3D pode ser uma excelente opção. Neste artigo, vamos explorar um exemplo de código que permite criar um efeito de cubo giratório 3D usando HTML e CSS. Esse efeito pode ser um ótimo complemento para páginas de portfólio, sites de apresentação e muito mais. Vamos mergulhar no código e entender como ele funciona passo a passo.

Estrutura HTML Básica

Primeiro, vamos dar uma olhada na estrutura HTML do código:

<!DOCTYPE html>
<html lang="ptbr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Cubo Giratório 3D</title>
</head>
<body>
    <div class="cubo">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Nessa estrutura, temos um documento HTML básico com um título e um elemento <div> que servirá como nosso cubo giratório.

Estilizando o Cubo com CSS

A parte mais interessante do efeito de cubo giratório acontece no CSS. O código estiliza o cubo e define as transformações 3D para criar a ilusão de um cubo em movimento. Aqui estão os principais estilos aplicados:

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

Nessas primeiras linhas, o seletor universal * é usado para aplicar algumas regras iniciais a todos os elementos HTML. Isso redefine as margens e o preenchimento para zero e define a propriedade box-sizing como border-box, o que faz com que o preenchimento e a borda sejam incluídos no cálculo do tamanho total do elemento.

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

Essas regras estilizam o corpo (<body>) do documento HTML. Ele é configurado como um flex container, com suas propriedades justify-content e align-items definidas como center. Isso centraliza vertical e horizontalmente o conteúdo dentro do corpo. Além disso, a cor de fundo (background) é definida como uma tonalidade de bege claro (#fffd).

.cubo {
    width: 80px;
    height: 80px;
    --clr: #AF1026;
    --clr-alpha: black;
    animation: girar 2s infinite linear;
    transform-style: preserve-3d;
}

Aqui, estamos estilizando o elemento <div> com a classe .cubo. Definimos suas dimensões como 80px x 80px. As variáveis --clr e --clr-alpha são usadas para definir cores que serão usadas mais tarde.

A propriedade animation define a animação que será aplicada ao elemento .cubo. Ela utiliza a animação chamada girar, que será explicada mais adiante. A animação terá duração de 2 segundos, será executada infinitamente e terá um ritmo linear.

A propriedade transform-style é definida como preserve-3d, o que permite que os elementos filhos do cubo também possuam transformações 3D.

.cubo > div {
    background-color: var(--clr-alpha);
    height: 100%;
    position: absolute;
    width: 100%;
    border: 5px solid var(--clr);
}

Nesse trecho, estamos estilizando os elementos filhos da classe .cubo, que representam as faces do cubo. Definimos a cor de fundo como a cor de fundo alpha (definida na variável --clr-alpha) e o tamanho como 100% da altura e largura do contêiner pai.

A propriedade position é definida como absolute para que possamos posicionar cada face precisamente dentro do cubo. Também aplicamos uma borda de 5px com a cor definida na variável --clr.

/* Transformações individuais para cada face do cubo */
.cubo div:nth-of-type(1) {
    transform: translateZ(-40px) rotateY(180deg);
}

.cubo div:nth-of-type(2) {
    transform: rotateY(-270deg) translateX(50%);
    transform-origin: top right;
}

.cubo div:nth-of-type(3) {
    transform: rotateY(270deg) translateX(-50%);
    transform-origin: center left;
}

.cubo div:nth-of-type(4) {
    transform: rotateX(90deg) translateY(-50%);
    transform-origin: top center;
}

.cubo div:nth-of-type(5) {
    transform: rotateX(-90deg) translateY(50%);
    transform-origin: bottom center;
}

.cubo div:nth-of-type(6) {
    transform: translateZ(40px);
}

Aqui é onde as transformações 3D são aplicadas às faces individuais do cubo:

A primeira face (nth-of-type(1)) é traduzida ao longo do eixo Z para dar a ilusão de profundidade e girada 180 graus ao longo do eixo Y.

As outras faces (nth-of-type(2) a nth-of-type(6)) são rotacionadas ao longo dos eixos X e Y em ângulos específicos, com pontos de origem de transformação ajustados para criar a ilusão de rotação suave.

As transformações translateZ permitem que as faces do cubo se afastem ou se aproximem para criar o efeito tridimensional.

@keyframes girar {
    0% {
        transform: rotate(0deg) rotateX(0deg) rotateY(0deg);
    }
  
    50% {
        transform: rotate(180deg) rotateX(180deg) rotateY(180deg);
    }
  
    100% {
        transform: rotate(360deg) rotateX(360deg) rotateY(360deg);
    }
}

Por fim, temos a definição da animação girar usando @keyframes. Esta animação define diferentes estados de transformação ao longo do tempo, de 0% a 100%. Cada estado inclui rotações ao longo dos eixos X, Y e uma rotação geral para criar a sensação de um cubo girando suavemente.

Espero que esta análise detalhada ajude você a compreender como o CSS contribui para criar o efeito de cubo giratório em 3D no exemplo de código fornecido. Se você tiver mais dúvidas ou quiser saber mais sobre algum aspecto específico, sinta-se à vontade para perguntar!