DEV Community

loading...
Cover image for Coding a 3D Cube in pure CSS !

Coding a 3D Cube in pure CSS !

Ustariz Enzo
Hi there ! I'm Enzo, a web developer / entrepreneur.
・2 min read

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/channel/UCiukrDWz1wqlHAvIdqgqmQg
Be part the first pioneers that follow me uh ? ⛰️

See you next time for some quick and sweet tutorials !

Enzo.

Discussion (0)