DEV Community

Cover image for Coding a 3D Cube in pure CSS !
Ustariz Enzo
Ustariz Enzo

Posted on • Edited on

9 2

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Use it with the child.

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

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));
}
Enter fullscreen mode Exit fullscreen mode

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);
}

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Bravissimo ! It's done 🥖🍷

Source code, with all the shiny CSS is right here :
https://github.com/Ziratsu/Cube-3D

Come and take a look at my brand new Youtube channel :
https://www.youtube.com/c/TheWebSchool
Be part the first pioneers that follow me uh ? ⛰️

See you next time for some quick and sweet tutorials !

Enzo.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more