jquery - 使 3D CSS3 元素连续旋转

Question

我基于 http://css3playground.com/flip-card.php 中的示例，使用 CSS3 transform: rotateY() 属性实现了一个绕 Y 轴旋转的简单双面元素。 .

我可以让它在悬停时或按设定的时间间隔旋转，但我试图让它连续旋转。我有以下脚本，但我无法“重置”转换，因此它似乎只在一个方向上旋转，到目前为止它只是来回摇摆。

setInterval(function() {
        $('.hover').removeClass('reverse').addClass('flip');
    setTimeout(function() {
        $('.hover').removeClass('flip').addClass('reverse')
    }, 1500);
}, 3000);

我会省去 CSS，它与示例页面上的内容基本相同。然而，.reverse 类只是 .flip 的克隆，具有 transform: rotateY() 的值，试图将其恢复到以相同的方向开始。

Answer 1

您需要使用关键帧动画。应该是这样的。

        @-webkit-keyframes rotate-full {
            0% {
            -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
          }

          50% {
            -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
          }

          100% {
            -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
          }
        }

这是我不久前做过的演示示例。

http://codepen.io/jeffpowersd/pen/mCbhq