<div class="container">
  <div class="card">
    <a class="card--title" href="#">Spinning card</a>
    <p class="card--text">
      demonstrating the backface visibility
    </p>
  </div>
</div>
@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(1turn);
  }
}

.card {
  animation: spin 5s ease;
  animation-iteration-count: infinite;
}

.container {
  perspective: 1000px;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.