CSS 3D CUBE

Width

Height

Depth

Opacity

Color #

Shadow

Class

<div class="4j0qdefl1uo">
  <div class="face -front">
  <div class="face -left">
  <div class="face -top">
  <div class="face -bottom">
  <div class="face -right">
  <div class="face -back">
</div>

.4j0qdefl1uo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.4j0qdefl1uo .face {
  position: absolute;
}

.4j0qdefl1uo .-front {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(0deg) translateZ(50px);
  background: rgba(103, 148, 193, 1);
}

.4j0qdefl1uo .-left {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(50px);
  background: rgba(88, 133, 178, 1);
}

.4j0qdefl1uo .-top {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(50px);
  background: rgba(108, 153, 198, 1);
}

.4j0qdefl1uo .-bottom {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(50px);
  background: rgba(68, 113, 158, 1);
}

.4j0qdefl1uo .-right {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(50px);
  background: rgba(88, 133, 178, 1);
}

.4j0qdefl1uo .-back {
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(50px);
  background: rgba(78, 123, 168, 1);
}