JS操纵CSS3D旋转动画

Question

我对这个 CSS 动画很陌生，我已经学习了本网站制作 3D 旋转元素的教程 http://www.the-art-of-web.com/css/3d-transforms/

这是我旋转的 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>

JS操纵CSS3D旋转动画

JS manipulate CSS 3D rotating animation

javascript

css

jquery

css-transforms

css-animations