Book like flip animation

by Amanda Williamson

HTML

<div class="deck">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

SCSS

body {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 100px;
  overflow: hidden;
}

.deck {
  position: absolute;
  perspective: 0;
}

.card {
  height: 100px;
  width: 80px;
  border-radius: 10px;
  background-color: steelblue;
  position: absolute;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.1);
  transform-style: preserve-3d;
  
  &:nth-child(2) {
    left: 10px;
    //background: red;
  }
  &:nth-child(1) {
    left: 20px;
    //background: green;
  }
  &:nth-child(4) {
    transform: rotate(180deg) translateX(90px);
  }
  &:nth-child(5) {
    transform: rotate(180deg) translateX(80px);
  }
  &:nth-child(6) {
    //background: yellow;
    transform: rotate3d(0,0,0,0deg);
    transform-origin: left;
    animation: flip 3s ease-in infinite;
  }
  
}

@keyframes flip{
  100% { 
    transform: rotate3d(0,1,0, 180deg) translateX(0px);
  }
}