0

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

我可以让它在悬停或设定的时间间隔上旋转，但我试图让它连续旋转。我有以下脚本，但我在“重置”变换时遇到了麻烦，使它看起来只向一个方向旋转，到目前为止它只是来回摇摆。

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

我会为您省去 CSS，它与该示例页面上的内容基本相同。但是，.reverse该类只是 的一个克隆.flip，其值用于transform: rotateY()尝试将其从同一方向带回起点。

4

1 回答 1

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

于 2013-08-25T03:23:55.177 回答