使 3D CSS3 元素连续旋转答案

【问题标题】：Make a 3D CSS3 element rotate continously使 3D CSS3 元素连续旋转
【发布时间】：2013-08-24 05:55:21
【问题描述】：

基于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() 的值以尝试将其带回到相同方向的开始。

【问题讨论】：

你能提供jsfiddle吗？
也许你不应该使用reverse 类；只是说。
查看答案-stackoverflow.com/a/38202760/104380

标签： jquery css 3d transform rotatetransform

【解决方案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

【讨论】：