<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;
}

.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform: perspective(1200px) translateZ(-150px);
}

.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;
  transform-origin: 50% 50% -150px;
  backface-visibility: hidden;
}
.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: perspective(1200px) rotateX(0deg) rotateY(180deg);
  animation: back 15s infinite linear;
}
.top {
  transform: perspective(1200px) rotateX(90deg);
  animation: top 15s infinite linear;
}
.bottom {
  transform: perspective(1200px) rotateX(-90deg);
  animation: bottom 15s infinite linear;
}
.front {
  transform: perspective(1200px) rotateX(0deg) ;
  animation: front 15s infinite linear;
}

.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 top {
	0% { transform:perspective(1200px) rotateX(90deg); }
  15% { transform: perspective(1200px) rotateX(180deg); }
	25% { transform: perspective(1200px) rotateX(180deg); }
	40% { transform: perspective(1200px) rotateX(270deg); }
	50% { transform: perspective(1200px) rotateX(270deg); }
	65% { transform: perspective(1200px) rotateX(360deg); }
	75% { transform: perspective(1200px) rotateX(360deg); }
	90% { transform: perspective(1200px) rotateX(450deg); }
	100% { transform:perspective(1200px) rotateX(450deg); }
}
@keyframes bottom {
	0% { transform:perspective(1200px)  rotateX(-90deg); }
  15% { transform: perspective(1200px) rotateX(0deg); }
	25% { transform: perspective(1200px) rotateX(0deg); }
	40% { transform: perspective(1200px) rotateX(90deg); }
	50% { transform: perspective(1200px) rotateX(90deg); }
	65% { transform: perspective(1200px) rotateX(180deg); }
	75% { transform: perspective(1200px) rotateX(180deg); }
	90% { transform: perspective(1200px) rotateX(270deg); }
	100% { transform:perspective(1200px) rotateX(270deg); }
}
@keyframes front {
	0% { transform: perspective(1200px) rotateX(0deg); }
  15% { transform: perspective(1200px) rotateX(90deg); }
	25% { transform: perspective(1200px) rotateX(90deg); }
	40% { transform: perspective(1200px) rotateX(180deg); }
	50% { transform: perspective(1200px) rotateX(180deg); }
	65% { transform: perspective(1200px) rotateX(270deg); }
	75% { transform: perspective(1200px) rotateX(270deg); }
	90% { transform: perspective(1200px) rotateX(360deg); }
	100% { transform: perspective(1200px) rotateX(360deg); }
}
@keyframes back {
	0% { transform:perspective(1200px) rotateX(0deg) rotateY(180deg) rotateZ(180deg); }
  15% { transform: perspective(1200px) rotateX(90deg) rotateY(180deg) rotateZ(180deg); }
	25% { transform: perspective(1200px) rotateX(90deg) rotateY(180deg) rotateZ(180deg); }
	40% { transform: perspective(1200px) rotateX(180deg) rotateY(180deg) rotateZ(180deg); }
	50% { transform: perspective(1200px) rotateX(180deg) rotateY(180deg) rotateZ(180deg); }
	65% { transform: perspective(1200px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
	75% { transform: perspective(1200px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
	90% { transform: perspective(1200px) rotateX(360deg) rotateY(180deg) rotateZ(180deg); }
	100% { transform:perspective(1200px) rotateX(360deg) rotateY(180deg) rotateZ(180deg); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.