3D Cube with animations... Only CSS👀 feat.Naruto

I made a 3D animated cube in pure CSS


Krutik Raut

2 years ago | 2 min read

Let's Get StartedSource Code + Output :

Apart from basic CSS properties, I have used some properties which change the 2D page of the view to a 3D one.

CSS properties:

  1. perspective
  2. perspective-origin
  3. transform-style
  4. transform (translate/rotate)

To make a 3D cube we have to first make a block that contains the structure of the cube

Lets White HTML first

<div class="scene"> <div class="box"> <div class="top"></div> <div class="bottom"></div> <div class="left"></div> <div class="right"></div> <div class="back"></div> <div class="front"></div> </div></div>

The scene contains the body of the cube, I have given the CSS class names to the sides of the cube which I guess makes sense to you all.

Adding the Magic of CSS

body { background-color: #ff9152; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; perspective: 20em; perspective-origin: 50% calc(50% - 10em);}
  1. I have given a background color to the body, used flex to center the elementsUse the perspective property to make the body 3D

Checkout docs for perspective at W3school: click here

  1. Setting perspective-origin by calculating the height of the body

The perspective-origin property defines at which position the user is looking at the 3D-positioned element.

.scene { position: relative; transform-style: preserve-3d; animation: rotateX 7s infinite linear;}

Setting the position to relative so the elements inside it can be positioned to absoluterespective to the scene

Adding a transform-style: preserve-3d

The transform-style property specifies how nested elements are rendered in 3D space.

Now let us style the cube:

.box { height: 120px; width: 120px; position: relative; transform-style: preserve-3d; animation: rotateY 5s infinite linear;}

Just gave some height, position, and animation

Styling the sides of the Cube

.top,.bottom,.left,.right,.front,.back { position: absolute; height: 120px; transform-style: preserve-3d; width: 120px; background-color: rgba(20, 116, 241, 0.281);background-size:cover; box-sizing:border-box;border: 5px solid #fff;}.front { transform: translateZ(3.7rem); background-image: url("");background-size:cover;}.right { transform: rotateY(270deg) translateZ(3.7rem);background-image: url("")}.back { transform: rotateY(180deg) translateZ(3.7rem);background-image:url("");background-size:cover;}.left { transform: rotateY(90deg) translateZ(3.7rem);background-image:url("");background-size:cover;}.top { transform: translateY(-50%) rotateX(90deg);scaleY(-1);background-image:url("");background-size:cover;}.bottom { bottom: -120px; transform: translateY(-50%) rotateX(90deg) scaleY(-1);background-image: url("");background-size:cover;}

Using the transform property and with use of translate and rotate will give the desired shape of the cube

Set the background with characters from #Naruto

Added Some keyframes to animate the cube

@keyframes rotateX{ 25% { transform: rotateX(-180deg); } 50% { transform: rotateY(-360deg); } 70%{ transfrom: rotateX(-180deg)} }

And we are done


Created by

Krutik Raut

///Just a random guy on the Internet.







Related Articles