Flip 3D

<style>
  .flip3D {
    width: 240px;
    height: 200px;
    margin: 10px;
    float: left;
  }

  .flip3D>.front {
    position: absolute;
    transform: perspective(600px) rotateY(0deg);
    background: #FC0;
    width: 240px;
    height: 200px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
  }

  .flip3D>.back {
    position: absolute;
    transform: perspective(600px) rotateY(180deg);
    background: #80BFFF;
    width: 240px;
    height: 200px;
    border-radius: 7px;
    backface-visibility: hidden;
    transition: transform .5s linear 0s;
  }

  .flip3D:hover>.front {
    transform: perspective(600px) rotateY(-180deg);
  }

  .flip3D:hover>.back {
    transform: perspective(600px) rotateY(0deg);
  }
</style>
<div class="flip3D">
  <div class="back">Box 1 - Back</div>
  <div class="front">Box 1 - Front</div>
</div>