3d tile flip effect

by Felis Catus

HTML

<div class="phones">
  <div id="p1" class="flip-parent">
    <div class="flip-plane">
      <div class="front-face">
        some front text
      </div>
      <div class="back-face">
        back side
      </div>
    </div>
  </div>
  <div id="p2" class="flip-parent">
    <div class="flip-plane">
      <div class="front-face">
        some front text
      </div>
      <div class="back-face">
        back side
      </div>
    </div>
  </div>
  <div id="p3" class="flip-parent">
    <div class="flip-plane">
      <div class="front-face">
        some front text
      </div>
      <div class="back-face">
        back side
      </div>
    </div>
  </div>
  <div class="phn">
  phone
  </div>
  <div class="phn">
  phone
  </div>
  <div class="phn">
  phone
  </div>
 </div>

SCSS

.phones{ 
  background :brown;
  .phn {
    background: white;
    clear: both;
    display: inline-block;
  }
 }
.flip-parent {
  &:last-of-type {
    clear: right;
  }

  position: relative;
  width: 100px;
  height: 100px;
  float:left;
  box-shadow: 0 0 3px #ccc;
  perspective-origin: 50% 50%;
  perspective: 300px;
  .flip-plane {
    transition: transform 500ms cubic-bezier(1, 1.49, 1, 1);
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .front-face, .back-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    background: white;
    box-shadow: 0 0 0 1px orange inset;
    transform-style: preserve-3d;
    &:before {
      background: orange;
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 100%;
      transform: rotateY(90deg) translatex(5px) translatez(-5px);
    }
  }
  .front-face {
    transform: translateZ(5px);
    //background: rgba(150, 200, 0, 0.5);
    &:before {
      //background: purple;
    }
  }
  .back-face {
    //background: rgba(255, 255 ,255, 0.5);
    transform: rotateY(180deg) translateZ(5px);
  }
  &:hover {
    .flip-plane {
      transform: rotateY(180deg);
    }
  }
}