<div class="container -column">
  <div class="card-holder">
    <div class="card -small -back -flipped">
      <a class="card--title" href="#">Flipping card</a>
      <p class="card--text">
        hiding backface is the key
      </p>
    </div>
    <div class="card -small -front -orange">
    </div>
  </div>
  <div class="card-holder">
    <div class="card -small -back -flipped">
      <a class="card--title" href="#">Flipping card</a>
      <p class="card--text">
        hiding backface is the key
      </p>
    </div>
    <div class="card -small -front -green">
    </div>
  </div>
</div>

.card-holder {
  position: relative;
  width: 320px;
  height: 148px;
  &:hover {
    .card.-front {
      transform: rotateY(-0.5turn);
    }
    .card.-back {
      transform: rotateY(0turn);
    }
  }
}

.card {
  position: absolute;
  transition: transform 1s ease;
  backface-visibility: hidden;
}
.-flipped {
  transform: rotateY(0.5turn);
}
.container {
  perspective: 1000px;
}