CSS 3D CUBE

Width

Height

Depth

Opacity

Color #

Shadow

Class

<div class="jr4569opa6o">
  <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>

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

.jr4569opa6o .face {
  position: absolute;
}

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

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

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

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

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

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