QbbjNL

index.html

<div class="container">
  <div class="flipper">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

QbbjNL.markdown

QbbjNL

Forked from Captain Anonymous's Pen JddYoJ.

A Pen by Vageesh Dwivedi on CodePen.

License.

style.css

.container {
  height: 80px;
  width: 80px;
}

.flipper {
  position: relative;
  display: block;
  height: inherit;
  width: inherit;
  -webkit-animation: flip 2s infinite ease-in-out;
  transform-style: preserve-3d;
}

.front,
.back {
  position: absolute;
  top: 40px;
  left: 40px;
  backface-visibility: hidden;
  display: block;
  background-color: #666;
  height: 40px;
  width: 40px;
}

.back {
  background-color: #bbb;
  z-index: 800;
  transform: rotateY(-180deg);
}

@-webkit-keyframes flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
}