Logo do Triângulo

Como criar um cubo (3D) com CSS

por Hugo de Oliveira

Publicado em 14/06/2021

Para criar um cubo (3D) com CSS, usaremos a propriedade transform para posicionar cada lado do cubo em três dimensões.
A propriedade transform recebe como valor algumas funções que transformam o posicionamento e a forma de um elemento com CSS.
Para criar nosso cubo, começaremos com o HTML.
<div class="cube"> <div class="face face--front">Front</div> <div class="face face--right">Right</div> <div class="face face--back">Back</div> <div class="face face--left">Left</div> <div class="face face--top">Top</div> <div class="face face--bottom">Bottom</div> </div>
Nesse HTML temos o elemento .cube, que será o nosso cubo e cada uma de suas faces (.face).
Para melhor visualizar nosso cubo, vamos adicionar alguns estilos básicos ao elementos na página.
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .face { background: linear-gradient(45deg, #4fd1c522, #4fd1c5cc); border: 2px solid #4fd1c5; display: flex; align-items: center; justify-content: center; font-size: 50px; font-weight: bold; color: #234e52; }
Também precisamos definir o tamanho do nosso cubo. Neste exemplo, vamos usar 200px.
.cube { width: 200px; height: 200px; } .face { /* ... */ width: 200px; height: 200px; }
Agora podemos começar a posicionar os elementos em três dimensões. Para deixar todas as .face na mesma posição inicial, usaremos position: absolute.
.face { /* ... */ position: absolute; }
Todas as .face estão no mesmo plano, mas para criar um cubo, precisamos girá-las e posicioná-las em seu lugar. Em um cubo de 200px de largura, todas as faces estão 100px de distância do centro.
Com transform, podemos usar translateX(), translateY() e translateZ(). Essas funções mudam a posição do elemento em cada um dos três eixos X, Y e Z. Também podemos usar rotateX() e rotateY(), para girar os elementos em torno de seus eixos X e Y.
Diagrama com a posição dos eixos X, Y e Z em um elemento em 3D
A .face--front será a face da frente do cubo:
.face--front { transform: translateZ(100px); }
As outras faces precisarão ser giradas para suas posições. .face--right, .face--back e .face--left giram em torno do seu eixo Y:
.face--right { transform: rotateY(90deg) translateZ(100px); } .face--back { transform: rotateY(180deg) translateZ(100px); } .face--left { transform: rotateY(-90deg) translateZ(100px); }
Para conseguir visualizar o que estamos construindo, vamos também aplicar uma rotação ao .cube, para ver as faces em perspectiva. Para preservar o posicionamento em 3D dos elementos, precisamos também usar transform-style: preserve-3d;.
.cube { /* ... */ transform: rotateX(-20deg) rotateY(-10deg); transform-style: preserve-3d; }
Imagem do que criamos até o momento no post, um cubo com duas faces ainda por posicionar.
Agora, precisamos posicionar .face--top e .face--bottom. Como elas ficarão posicionada para cima e para baixo, usaremos rotateX() para girá-las em torno do eixo X.
.face--top { transform: rotateX(90deg) translateZ(100px); } .face--bottom { transform: rotateX(-90deg) translateZ(100px); }
Pronto, agora criamos um cubo com CSS.
Se você quiser adicionar um pouco de perspectiva 3D aos elementos, você pode usar perspective: 500px em body.
Com o cubo que criamos, podemos também fazer uma animação de rotação, para mostrar todas as faces do cubo. Fique à vontade para explorar o Codepen que criei para acompanhar esse post.

Referências

Construa a sua carreira em desenvolvimento front-end

Mais conhecimento, mais prática, mais oportunidades. Aprenda a construir webapps avançados, com conteúdo objetivo e direto das trincheiras. Sem spam.

Twitter
Instagram