JS操纵CSS 3D旋转动画

Question

我对这个 CSS 动画东西很陌生，我已经按照这个网站 http://www.the-art-of-web.com/css/3d-transforms/ 制作 3D 旋转元素的教程进行操作

这是我的旋转 4 面 3D 正方形：https://jsfiddle.net/k0u8kn4w/

现在我想用 JS 让正方形的一边在我点击它时只旋转一次到第二边。所以假设初始面是A面（不动），当我点击它时，我希望它旋转以显示B面（旋转一次90度），当我再次点击它时，转向C面，再次点击然后转到 D 面，再次单击转到 A 面，依此类推。

尝试通过运行和暂停来操作animation-play-state，不起作用，还尝试操作rotateY 和TranslateZ 度数，不知道如何操作keyframes，在任何地方都找不到。

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

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

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
}

#spinner {
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  -webkit-animation-play-state: running;
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-play-state: running;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

#spinner div,
#spinner img {
  position: absolute;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

<div id='stage' style='height: 160px; width: 180px;'>
  <div id='spinner'>
    <div style='-webkit-transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div>
    <div style='-webkit-transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div>
    <div style='-webkit-transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div>
    <div style='-webkit-transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div>
  </div>
</div>

Answer 1

您只需要恢复动画并等待 1/4 的动画持续时间。

简化了您的代码（删除了供应商前缀，大多数浏览器在没有它们的情况下都可以正常工作，但如果需要，请重新应用它们）。演示：

var spinner = document.querySelector("#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);
});

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

#stage {
  margin: 1em auto;
  perspective: 1200px;
}

#spinner {
  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;
  animation-play-state: paused; /* new */
  transform-style: preserve-3d;
}

#spinner div,
#spinner img {
  position: absolute;
  border: 1px solid #ccc;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

<div id='stage' style='height: 160px; width: 180px;'>
  <div id='spinner'>
    <div style='transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div>
    <div style='transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div>
    <div style='transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div>
    <div style='transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div>
  </div>
</div>