CSS 3D CUBE

Width

Height

Depth

Opacity

Color #

Shadow

Class

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

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

.lplthm22auo .face {
  position: absolute;
}

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

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

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

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

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

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