title: CSS transform rotate on Y axis always showing the same face
body: <p>I would like to make a slider a bit like this example:
  <a href="https://codepen.io/zhangzor/pen/XWKxNJN?editors=1100" rel="nofollow noreferrer">https://codepen.io/zhangzor/pen/XWKxNJN?editors=1100</a></p>
  <p>The squares should always show the same face and not move like a turnstile, but I can't seem to do that? When I update the rotate boxes individually, their position is reset.</p>
  <p>Do you know how to do this with pure CSS (no Three.js or other libraries)?</p>
  <p>Thank you and have a good day</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    perspective: 1000px;
  }
  
  .box {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 150px auto;
    transform-style: preserve-3d;
    animation: move 10s linear infinite;
  }
  
  .box:hover {
    animation-play-state: paused;
  }
  
  @keyframes move {
    0% {
      transform: rotateY(0);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  
  div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: skyblue;
  }
  
  .box div:first-child {
    transform: rotateY(0) translateZ(300px);
  }
  
  .box div:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
  }
  
  .box div:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
  }
  
  .box div:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px);
  }
  
  .box div:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px);
  }
  
  .box div:last-child {
    transform: rotateY(300deg) translateZ(300px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>