How To Create 3D Cube In HTML And CSS?

In this post we will create 3D Cube.

And then animate horizontally in infinite loop.

HTML

<div class="container">
  <div class="cube">
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
    <div class="right">Right</div>
    <div class="left">Left</div>
    <div class="front">Front</div>
    <div class="back">Back</div>
  </div>
</div>
<!-- (text) top, bottom,right ... will make easier to visualize sides when creating cube -->

CSS

html{
    box-sizing: border-box;
}

*,
*::before,
*::after{
    box-sizing: inherit;
}

body{
    margin: 0;
    padding: 0;
    height: 100vh;
}

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    perspective: 1100px;
    width: 500px;
    height: 500px;
}

This places text at the center of the page.

Related article How Do You Center Element Using CSS?

.cube{
    height: 250px;
    width: 250px;
    transform-style: preserve-3d;
}

This will give the height and width to cube.

And preserve-3d will make it 3D.

.cube div{
    height: 250px;
    width: 250px;
    text-align: center;
    padding: 100px 0px;
    color: white;
    background: #3D9397;
    opacity: 0.6;
    border: 1px solid black;
    font-size: 32px;
}

This gives height and width to the sides of cube.

Opacity will helps us to see the depth later on.

Now if you position:absolute, the sides of the cube will stack on top of each other.

.cube div{
    height: 250px;
    width: 250px;
    text-align: center;
    padding: 100px 0px;
    color: white;
    background: #3D9397;
    opacity: 0.6;
    border: 1px solid black;
    font-size: 32px;
    position: absolute;
}

Not let’s position each side of the 3D cube.

.top{
    top: -125px;
    transform: rotateX(-90deg);
}

.bottom{
    bottom: -125px;
    transform: rotateX(90deg);
}

.right{
    right: -125px;
    transform: rotateY(-90deg);
}

.left{
    left: -125px;
    transform: rotateY(90deg);
}

.front{
    transform: translateZ(125px);
}

.back{
    transform: translateZ(-125px);
}

As you can see not all sides are visible.

Therefore we have to rotate the cube and position it at the center.

.cube{
    height: 250px;
    width: 250px;
    position: absolute;
    top: 120px;
    left: 120px;
    transform-style: preserve-3d;
    transform: rotateY(30deg);
}

Now let’s rotate the 3D cube horizontally in infinite loop.

You can also delete the texts (top, bottom, right…) if you want to.

.cube{
    height: 250px;
    width: 250px;
    position: absolute;
    top: 120px;
    left: 120px;
    transform-style: preserve-3d;
    transform: rotateY(30deg);
    animation: rotateCube 5s linear infinite;  
}
@keyframes rotateCube {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
  }

Just for aesthetic purpose, let’s add background to 3D cube.

.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    perspective: 1100px;
    width: 500px;
    height: 500px;
    background: #D35B38;
    border-radius: 15px;
    box-shadow: 5px 10px 8px rgba(0,0,0,0.7); 
}

Complete CSS Code

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 1100px;
    width: 500px;
    height: 500px;
    background: #D35B38;
    border-radius: 15px;
    box-shadow: 5px 10px 8px rgba(0, 0, 0, 0.7);
}

.cube {
    height: 250px;
    width: 250px;
    position: absolute;
    top: 120px;
    left: 120px;
    transform-style: preserve-3d;
    transform: rotateY(30deg);
    animation: rotateCube 5s linear infinite;
}

.cube div {
    height: 250px;
    width: 250px;
    text-align: center;
    padding: 100px 0px;
    color: white;
    background: #3D9397;
    opacity: 0.6;
    border: 1px solid black;
    font-size: 32px;
    position: absolute;
}

.top {
    top: -125px;
    transform: rotateX(-90deg);
}

.bottom {
    bottom: -125px;
    transform: rotateX(90deg);
}

.right {
    right: -125px;
    transform: rotateY(-90deg);
}

.left {
    left: -125px;
    transform: rotateY(90deg);
}

.front {
    transform: translateZ(125px);
}

.back {
    transform: translateZ(-125px);
}

@keyframes rotateCube {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}