<div class="scene">
  <div class="cube">
    <div class="side back">
      <div class="guides"></div>
      <span>BACK</span>
    </div>
    <div class="side top">
      <div class="guides"></div>
      <span>TOP</span>
    </div>
    <div class="side bottom">
      <div class="guides"></div>
      <span>BOTTOM</span>
    </div>
    <div class="side front">
      <div class="guides"></div>
      <span>FRONT</span>
    </div>
  </div>
</div>
.scene {
  width: 300px;
  height: 300px;
  margin: 75px auto 0;
  perspective: 1200px;
}

.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: flat;
  transform: translateZ(-150px) rotateX(0deg);
  animation: example 15s linear infinite;
}

.side {
  position: absolute;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background-color: #999;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 120px 0;
  font: 50px/1 'Trebuchet MS', sans-serif;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}
.side::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
}
.side span {
  position: relative;
}

.guides {
  position: absolute;
  top: 0;
  left: 50px;
  width: 200px;
  height: 100%;
  border-style: dotted;
  border-width: 0 1px;
  color: rgba(255, 255, 255, 0.6);
}
.guides::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  border-left: 1px dotted;
}

.back {
  transform: translateZ(-150px) rotateX(180deg);
}
.top {
  transform: translateY(-150px) rotateX(90deg);
}
.bottom {
  transform: translateY(150px) rotateX(270deg);
}
.front {
  transform: translateZ(150px);
}
.top, .bottom {
  background-color: #698bbe;
}

.back {
  background-image: url(https://askd.github.io/codepen/back.jpg);
}
.top {
  background-image: url(https://askd.github.io/codepen/top.jpg);
}
.bottom {
  background-image: url(https://askd.github.io/codepen/bottom.jpg);
}
.front {
  background-image: url(https://askd.github.io/codepen/front.jpg);
}

@keyframes example {
  0% { transform: translateZ(-150px) rotateX(0deg); }
	15% { transform: translateZ(-150px) rotateX(90deg); }
	25% { transform: translateZ(-150px) rotateX(90deg); }
	40% { transform: translateZ(-150px) rotateX(180deg); }
	50% { transform: translateZ(-150px) rotateX(180deg); }
	65% { transform: translateZ(-150px) rotateX(270deg); }
	75% { transform: translateZ(-150px) rotateX(270deg); }
	90% { transform: translateZ(-150px) rotateX(360deg); }
	100% { transform: translateZ(-150px) rotateX(360deg); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.