backface-visibility

backface-visibility.markdown

backface-visibility

A Pen by Greg Hovanesyan on CodePen.

License.

index.html

<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>

style.scss

@keyframes spin {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(1turn);
  }
}

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

.container {
  perspective: 1000px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" />
<link href="https://codepen.io/gregh/pen/jyNrJW.css" rel="stylesheet" />