Rotating Cube

CSS only!

by Allen N.

HTML

<div class="cube">
    <div class="side front">1</div>
    <div class="side back">2</div>
    <div class="side right">3</div>
    <div class="side left">4</div>
    <div class="side top">5</div>
    <div class="side bottom">6</div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial;
}

.cube {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-13deg);
  transform-style: preserve-3d;
  transition: all .3s ease-in;

  animation-name: rotateY-loop;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: forward;
  animation-duration: 12s;
}
.cube:hover {
  animation-play-state: paused;
}
.side {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 20px;
  color: #000;
  text-shadow: 0 0 77px #000;
  border: 1px solid #000;
  transition: all 210ms;
  cursor: pointer;
}
.side:hover {
  font-size: 70px;
  text-shadow: 0 0 7px #000;
  color: #FFF;
}
.front {
  background: rgba(90,90,90,.7);
  transform: translateZ(50px);
}
.back {
  background: rgba(0,210,0,.7);
  transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(210,0,0,.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0,0,210,.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(210,210,0,.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(210,0,210,.7);
  transform: rotateX(-90deg) translateZ(50px);
}




@keyframes rotateY-loop {
    0% {
        transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-13deg);
    }
    50% {
        transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-193deg);
    }
    100% {
        transform: translate(-50%, -50%) rotateX(-13deg) rotateY(-373deg);
    }
}