<div class="cube">

  <div class="side front"></div>

  <div class="side back"></div>

  <div class="side left"></div>

  <div class="side right"></div>

  <div class="side top"></div>

  <div class="side bottom"></div>

</div>

html {

  width: 100vw;

  height: 100vh;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0;

  font-family: sans-serif;

  text-align: center;

}

​

body {

  perspective: 700px;

}

​

.cube {

  width: 300px;

  height: 300px;

  transform-style: preserve-3d;

}

​

.side {

  position: absolute;

  box-sizing: border-box;

  width: 300px;

  height: 300px;

​

  opacity: 0.7;

}

​

.front {

    transform: translateZ(150px);

    background-color: #ef5350;

}

​

.back {

    transform: translateZ(-150px);

    background-color: #ba68c8;

}

​

.left {

  transform: translateX(-150px) rotateY(90deg);

  background-color: #64b5f6;

}

​

.right {

  transform: translateX(150px) rotateY(90deg);

  background-color: #4dd0e1;

}

​

.top {

  transform: translateY(-150px) rotateX(90deg);

  background-color: #4db6ac;

}

​

.bottom {

  transform: translateY(150px) rotateX(90deg);

  background-color: #fff176;

}