旋转立方体并暂停动画播放状态

Question

我制作了一个 HTML 立方体，并在点击它后为其旋转设置了动画。每次单击时，立方体都会旋转 90 度。我有一个使 360 degrees.It 在动画总持续时间的 1/4 后暂停并在单击后再次运行的动画。这样我们就可以依次看到每个侧面 - 1,2,3,4。

但是在大约 10 次点击之后，很明显角度超过了 90，但是视图不再是等轴测的。

如何让这个立方体正好旋转 90 度并且看起来正确？

估计靠时长不好吧。如果浏览器可以观看角度并在 90、180、270、360 度暂停动画播放状态，可能会更容易

      var spinner = document.getElementById('spinner');
      // get animation duration in ms
      var animationDuration = parseFloat(window.getComputedStyle(spinner)['animation-duration'])*1000;

      spinner.addEventListener('click', function () {
        // run animation
        spinner.style['animation-play-state'] = 'running';
        // pause animation after animationDuration / 4
        setTimeout(function () {
          spinner.style['animation-play-state'] = 'paused';
        }, animationDuration / 4);
      });

          body {
        -webkit-font-smoothing: antialiased;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      .container {
        background-color: #282c34;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 100px;
        color: black;
      }
      .scene {
        position: relative;
        width: 120px;
        height: 120px;
        transform-style: preserve-3d;
        transform: rotatex(-33.5deg) rotatey(45deg);
      }

      .face {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 100px;
        background: rgba(141, 148, 249, 0.5);
        line-height: 100px;
        border: 2px solid white;
      }
      .face-front {
        transform: rotateY(360deg) translateZ(60px);
      }
      .face-right {
        transform: rotateY(90deg) translatez(60px);
      }
      .face-back {
        transform: rotateY(180deg) translatez(60px);
      }
      .face-left {
        transform: rotateY(270deg) translateZ(60px);
      }
      .face-top {
        transform: rotatex(90deg) translatez(60px);
      }
      .face-bottom {
        transform: rotatex(-90deg) translatez(60px);
      }

      #spinner {
        position: absolute;
        display: inline-block;
        width: 120px;
        height: 120px;
        left: 0;
        top: 0;
        transform-style: preserve-3d;
        animation-name: spinner;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 4s;
        animation-play-state: paused;
        transform-style: preserve-3d;
      }

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="scene">
        <div id="spinner">
          <div class="face face-left">1</div>
          <div class="face face-front">2</div>
          <div class="face face-right">3</div>
          <div class="face face-back">4</div>
          <div class="face face-top">5</div>
          <div class="face face-bottom">6</div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

不建议使用您所说的持续时间。

另一种方法是使用 transform css 样式，并在每次点击时添加 90 度：

然后我们只需要一个 CSS 规则来将一些 'animation' 添加到转换中：
transition: transform 1s ease;

var spinner = document.getElementById('spinner');
var scene = document.getElementsByClassName('scene')[0];

let currentRotation = 45;

spinner.addEventListener('click', function () {
  currentRotation += 90; // Or change to -= to go clockwise
  scene.style['transform'] = `rotatex(-33.5deg) rotatey(${currentRotation}deg)`;
});

body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 100px;
  color: black;
}
.scene {
  position: relative;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  transform: rotatex(-33.5deg) rotatey(45deg);
  transition: transform 1s ease;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 100px;
  background: rgba(141, 148, 249, 0.5);
  line-height: 100px;
  border: 2px solid white;
}
.face-front {
  transform: rotateY(360deg) translateZ(60px);
}
.face-right {
  transform: rotateY(90deg) translatez(60px);
}
.face-back {
  transform: rotateY(180deg) translatez(60px);
}
.face-left {
  transform: rotateY(270deg) translateZ(60px);
}
.face-top {
  transform: rotatex(90deg) translatez(60px);
}
.face-bottom {
  transform: rotatex(-90deg) translatez(60px);
}

#spinner {
  position: absolute;
  display: inline-block;
  width: 120px;
  height: 120px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-play-state: paused;
  transform-style: preserve-3d;
}

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

<div class="container">
  <div class="scene">
    <div id="spinner">
      <div class="face face-left">1</div>
      <div class="face face-front">2</div>
      <div class="face face-right">3</div>
      <div class="face face-back">4</div>
      <div class="face face-top">5</div>
      <div class="face face-bottom">6</div>
    </div>
  </div>
</div>

旋转立方体并暂停动画播放状态

Rotate cube and pause animation-play-state

javascript

css

css-animations