CSS 3D cube 
Tags: html, css, beginners, webdev
Published: 2018-04-19 16:28:24

---
title: CSS 3D cube 
published: true
description: Learn how to use CSS 3D space by creating a 3D cube.
tags: html,css,beginners,web development
---

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

<h3>HTML</h3>

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.

```html
<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>

```

<h3>CSS</h3>

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.



```css
#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.


```css
.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:



![3D Space Image](https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2014/10/axes.png)


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

```css
.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.

![Cube without Z-Axis](https://thepracticaldev.s3.amazonaws.com/i/3you3axgwi84p0aq1n01.JPG)


>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.



<h6>MY PEN : </h6>

{% codepen https://codepen.io/mehra_as/pen/KRKPBq %}