Como criar um cubo (3D) com CSS
por Hugo Bessa
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.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; }
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.