Question

我有这个动画：

div
{
    width: 100px;
    height: 100px;
    margin: 50px 0 0 50px;
    background: maroon;
    animation: spinner 1s infinite linear;
    perspective: 500px;
    transform-style: preserve-3d;
}

@keyframes spinner {
    0% { transform: rotate3d(1, 1, 1, 0deg); }
    50% { transform: rotate3d(1, 1, 1, 180deg); }
    100% { transform: rotate3d(1, 1, 1, 360deg); }
}

http://jsfiddle.net/8Sg3h/

我希望广场无限旋转一个方向。此刻它在0到360的所有轴上旋转，然后从360旋转回来，同样地从0旋转到0.我希望它继续向前移动，而不是回到原点。

我见过许多连续旋转的例子，但大多数都使用旋转或变换，而不是rotate3d。是否可以使用CSS rotate3D无限旋转某些东西？

Answer 1

语法正确，但您需要在浏览器特定的转换中包含特定于浏览器的关键帧动画：

因此，对于基于Webkit的浏览器，您需要添加：

div{
    -webkit-animation: spinner 1s infinite linear;
}

@-webkit-keyframes spinner {
    0% { 
       -webkit-transform: rotate3d(1, 1, 1, 0deg);
       -ms-transform: rotate3d(1, 1, 1, 0deg);
       -o-transform: rotate3d(1, 1, 1, 0deg);
       transform: rotate3d(1, 1, 1, 0deg);
    }
    50% { 
       -webkit-transform: rotate3d(1, 1, 1, 180deg);
       -ms-transform: rotate3d(1, 1, 1, 180deg);
       -o-transform: rotate3d(1, 1, 1, 180deg);
       transform: rotate3d(1, 1, 1, 180deg);
    }
    100% { 
        -webkit-transform: rotate3d(1, 1, 1, 360deg);
       -ms-transform: rotate3d(1, 1, 1, 360deg);
       -o-transform: rotate3d(1, 1, 1, 360deg);
       transform: rotate3d(1, 1, 1, 360deg);
    }
}

查看完整示例的小提琴，它在支持动画和transform3d的主流浏览器中工作：

小提琴： http://jsfiddle.net/8Sg3h/84/

Answer 2

我已经删除％50％的关键帧，
现在广场似乎朝一个方向旋转。

在：

@keyframes spinner {
   0% { transform: rotate3d(1, 1, 1, 0deg); }
   50% { transform: rotate3d(1, 1, 1, 180deg); }
   100% { transform: rotate3d(1, 1, 1, 360deg); }
}

后：

@keyframes spinner {
0% { transform: rotate3d(1, 1, 1, 0deg); }
50% { transform: rotate3d(1, 1, 1, 180deg); }
100% { transform: rotate3d(1, 1, 1, 360deg); }
}

小提琴// http://jsfiddle.net/8Sg3h/138/

CSS3 rotate3d动画重复

2 个答案: