<div class="rotate hidden">
  Я вмію крутитися
</div>
<div class="rotate">
  Я вмію крутитися
</div>

<p>Для цих двох блоків встановлено <code>transform</code>. Але при прокручуванні, "задню частину" видно тільку у другого блоку, тому що для першого задано <code>backface-visibility: hidden;</code>.</p>
body {
  font-family: sans-serif;
  line-height: 1.45;
  font-size: 17px;
}

.rotate {
  background-color: red;
  display: inline-block;
  color: #f1f1f1;
  padding: 36px;
  margin: 16px;
  font-style: italic;
  animation: rotate 5s linear 0s infinite normal none;
}

.rotate.hidden {
  backface-visibility: hidden;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg); 
  }
  to {
    transform: rotateY(360deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.