<div class="container">
  <div class="cuboid">
    <div class="cuboid__face cuboid__face--top">Top</div>
    <div class="cuboid__face cuboid__face--bottom">Bottom</div>
    <div class="cuboid__face cuboid__face--left">Left</div>
    <div class="cuboid__face cuboid__face--right">Right</div>
    <div class="cuboid__face cuboid__face--front">Front</div>
    <div class="cuboid__face cuboid__face--back">Back</div>
  </div>
</div>
body {
  padding: 0;
  margin: 0
}

.container {
  width: 200px;
  height: 200px;
  perspective: 500px;
  margin: 100px;
}

.cuboid {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}

.cuboid__face {
  width: 200px;
  height: 200px;
  background: skyblue;
  border: 2px solid black;
  position: absolute;
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 2rem;
}

.cuboid__face--front {
  transform: translateZ(100px);
}

.cuboid__face--back {
  transform: translateZ(-100px) rotateY(180deg);
}

.cuboid__face--left {
  transform: translateX(-100px) rotateY(-90deg);
}

.cuboid__face--right {
  transform: translateX(100px) rotateY(90deg);
}

.cuboid__face--top {
  transform: translateY(-100px) rotateX(90deg);
}

.cuboid__face--bottom {
  transform: translateY(100px) rotateX(-90deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.