CSS 3D cube

In this short tutorial, I will show you how easy it is to create a 3d cube with CSS.

HTML

Here In HTML file, we have a parent div which have an id of a wrapper and a child div with a class of cube. And At last, we have six child div which represent 6 phases of a cube.

<div id="wrapper">
  <div class="cube">
    <!--Front-->
    <div></div>
    <!--Back-->
    <div></div>
    <!--Left-->
    <div></div>
    <!--Right-->
    <div></div>
    <!--Top-->
    <div></div>
    <!--Bottom-->
    <div></div>
  </div>
</div>

CSS

In CSS, first of all, we set a style for our parent div by targeting it's id #wrapper and style for our child div by targeting it's class .cube.

For wrapper, we set its width and height equal to 300px and margin to 100px auto to place the div in the center of the page and 100px off from the top.

For a cube, we set it's position to relative and width and height equal to 150px. And we also apply some degree of rotation on both X and Y axis to make it look like as a 3D object.

#wrapper{
  width:300px;
  height:300px;
  perspective:700px;
  -webkit-perspective:700px;
  margin:100px auto;
}

.cube{
  position:relative;
  width:150px;
  height:150px;
  transform-style:preserve-3d;
  transform:rotateY(35deg) rotatex(-38deg);
}

In above two styles, we have 2 new properties which allow us to create a 3D space in a browser.

Perspective create 3d space in our browser.Lower the value higher the 3d depth will be.

We're using transform-style which is common property but we set its value to preserve-3d which will set all the children of .cube in 3d space.

Here comes the final part of 3D cube we're making.

.cube div{
  position:absolute;
  width:150px;
  height:150px;
  background:rgba(0,0,0,0.1);
}

Here, first of all, we're targeting all the child div's and setting the position of all those div's to absolute and after that we're setting the height and width of a div as 100% which is equal to (150px * 150px).

Placing the child div on Z'axis

Right now we have all those child div's over each other in same Z-axis.The best part of 3d space is that it allows us to place an item on differnt Z-axis.

This is how Z'axis looks like:

Now let's do some CSS work for setting the position of each child to make a cube.

.cube div:nth-child(1){
  transform:translateZ(75px);
  background:#237A57;
}

.cube div:nth-child(2){
  transform: rotateX(180deg) translateZ(75px);
  background:#005AA7;
}

.cube div:nth-child(3){
  transform: rotateY(-90deg) translateZ(75px);
  background:#DA4453;
}

.cube div:nth-child(4){
  transform:rotateY(90deg) translateZ(75px);
  background:#a8c0ff;
}

.cube div:nth-child(5){
  transform: rotateX(90deg) translateZ(75px);
  background:#fc4a1a;
}

.cube div:nth-child(6){
  transform:rotateX(-90deg) translateZ(75px);
  background:#f7b733;
}

Here we're targeting each child div with pseudo selector called nth-child and passing the position of div we want to style.

We just set the Z-axis of all the div to 75px which is the half of width of our cube i.e. 150/2 = 75px. And after setting up Z-axis for all child elements we're also placing each div using rotateX and rotateY in correct position on Z-axis to form a cube.

If you don't give a Z-axis value to the child div's than all those div's will rotate on same Z-axis(0 by default) which will create an image shown above.

MY PEN :