Posted on Jan 12, 2021 • Edited on Feb 18, 2022

Coding a 3D Cube in pure CSS !

Hey fellow creators !

It's time to have fun with the perspective in CSS.

If you prefer to watch the video version it's right here :

1. The HTML structure.

When you use perspective in CSS, you need a container to set the perspective depth, and a child or children to play with the 3D environment.

 <div class="container"> <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> </div>

2. Perspective set up.

Create the deepness of the perspective.
Perspective will add depth between the screen and the scene.

.container { width: 200px; height: 200px; perspective: 1000px; margin: 100px auto 0; }

Use it with the child.

.cube { transform-style: preserve-3d; width: 100%; height: 100%; position: relative; }

Style the faces, the bg-image is just to have a stylish background.

.face { position: absolute; width: 100%; height: 100%; background-image: repeating-linear-gradient(0deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),repeating-linear-gradient(90deg, rgba(70,70,70, 0.2) 0px, rgba(70,70,70, 0.2) 1px,transparent 1px, transparent 21px),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255)); }

3 Translate and rotate the faces.

The translateZ will bring the elements closer to the screen.
It's used to create the cube dimensions. (100px).
The rotation are on X and Y, to place the elements on the edges of the cube.

 .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .front { transform: rotateX(0deg) translateZ(100px); } .back { transform: rotateX(-180deg) translateZ(100px); }

4. 360° flip time !

Create and link the animation.

@keyframes spin { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(360deg); } } .cube { transform-style: preserve-3d; width: 100%; height: 100%; position: relative; animation: spin 5s infinite linear; }