Tutorial: Criando um Cubo 3D Interativo com HTML, CSS e JavaScript

Neste tutorial, vamos criar um cubo 3D interativo usando apenas HTML, CSS e JavaScript. O projeto inclui animações e efeitos responsivos ao movimento do mouse.

Veja o projeto em funcionamento neste link. Cubo-3D.

Veja o vídeo no YouTube:

1. Estrutura HTML

A base do nosso projeto é um contêiner div chamado .scene que envolve o cubo e suas faces. O código HTML é simples e direto:



<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cubo 3D</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div class="scene">

        <div class="cube">

            <div class="face front"><div class="grid"></div></div>

            <div class="face back"><div class="grid"></div></div>

            <div class="face left"><div class="grid"></div></div>

            <div class="face right"><div class="grid"></div></div>

            <div class="face top"><div class="grid"></div></div>

            <div class="face bottom"><div class="grid"></div></div>

        </div>

    </div>

    <script src="script.js"></script>

</body>

</html>

Explicação

A classe .scene cria o cenário 3D.

A classe .cube contém as faces do cubo.

Cada face é representada por uma div.face com um div.grid para os efeitos visuais internos.

2. Estilo CSS

Agora, vamos estilizar o cubo para que ele tenha uma aparência realista em 3D. Adicione o código abaixo no arquivo style.css:



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

body {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);

    perspective: 1000px;

}

.scene {

    position: relative;

    width: 300px;

    height: 300px;

    transform-style: preserve-3d;

}

.cube {

    position: absolute;

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

}

.face {

    position: absolute;

    width: 300px;

    height: 300px;

    transform-style: preserve-3d;

    border: 2px solid #fff;

    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);

}

.front {

    transform: rotateY(0deg) translateZ(150px);

    background: linear-gradient(135deg, #ff512f, #dd2476);

}

.back {

    transform: rotateY(180deg) translateZ(150px);

    background: linear-gradient(135deg, #2193b0, #6dd5ed);

}

.left {

    transform: rotateY(-90deg) translateZ(150px);

    background: linear-gradient(135deg, #00c6ff, #0072ff);

}

.right {

    transform: rotateY(90deg) translateZ(150px);

    background: linear-gradient(135deg, #00f260, #0575e6);

}

.top {

    transform: rotateX(90deg) translateZ(150px);

    background: linear-gradient(135deg, #e1eec3, #f05053);

}

.bottom {

    transform: rotateX(-90deg) translateZ(150px);

    background: linear-gradient(135deg, #f7971e, #ffd200);

}

.grid {

    display: grid;

    grid-template-columns: repeat(10, 1fr);

}

.grid span {

    width: 30px;

    height: 30px;

    background: rgba(255, 255, 255, 0.1);

    border: 0.1px solid rgba(255, 255, 255, 0.3);

    transform-style: preserve-3d;

    perspective: 500px;

    transition: background 0.3s, transform 0.3s;

}

.grid span.active {

    background: #ffeb3b;

    z-index: 10000;

    filter: drop-shadow(0 0 20px #ffeb3b);

    transform: scale(1.1);

    border-radius: 50%;

}

Explicação

Perspectiva: Adicionada ao <body> para criar o efeito 3D.

Faces: Cada face recebe uma cor com gradiente e é posicionada em 3D.

Efeitos de grade: As grades são compostas por spans com bordas e transições suaves.

3. Lógica JavaScript

Por último, adicione o seguinte script no arquivo script.js:



document.addEventListener('DOMContentLoaded', function(){

    let cube = document.querySelector('.cube');

    let grids = document.querySelectorAll('.grid');

    grids.forEach(grid => {

        for(let i=0; i<100 addrandomactiveclass="" function="" grid.appendchild="" grid="" grids.foreach="" i="" let="" span=""> {

            let spans = grid.querySelectorAll('span');

            let randomIndex = Math.floor(Math.random() * spans.length);

            spans[randomIndex].classList.add('active');

            let removeTime = Math.floor(Math.random() * 1000) + 500;

            setTimeout(() => {

                spans[randomIndex].classList.remove('active');

            }, removeTime);

        });

    }

    function randomInterval(){

        let interval = Math.floor(Math.random() * 200) + 100;

        addRandomActiveClass();

        setTimeout(randomInterval, interval);

    } 

    randomInterval();

    document.addEventListener('mousemove', (e) => {

        let x = e.clientX / window.innerWidth - 0.5;

        let y = e.clientY / window.innerHeight - 0.5;

        cube.style.transform = `rotateX(${y * 360}deg) rotateY(${x * 360}deg)`;

    });

});

Explicação

Criação das grades: O script gera 100 span em cada face para criar os efeitos de luz dinâmica.

Efeitos aleatórios: Cada span recebe a classe .active aleatoriamente e é removida após um intervalo.

Interatividade: O movimento do mouse altera o ângulo do cubo em 3D.

Se preferir, os códigos estão no meu Repositório no GitHub.

4. Demonstração Final

Após integrar os arquivos, o cubo 3D estará pronto, com interatividade e animações.

Programar Tudo - Blog de Programação

Pesquisar este blog