Question

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

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

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

在我做了一段时间后的演示示例中。[/ p>

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

使3D CSS3元素连续旋转

1 个答案: