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。

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

   socket.on('dates', function(dateData) {

        var toDate_query = dateData.toDate;
        var fromDate_query = dateData.fromDate;
        connection.query("SELECT * FROM report WHERE date BETWEEN ? AND  ?", [fromDate_query, toDate_query], function(err, rows) {
          if (err) console.log(err);
          else {
            for (var i = 0; i < rows.length; i++) {
              var row = rows[i];
              console.log("**********************************");
              console.log("Possible machine: " + row.machine); //output: nothing
              console.log("**********************************");
            }
          }
        });

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);
}

JS操纵CSS 3D旋转动画

1 个答案: