3

我有这个动画：

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。我希望它继续单向运行，而不是自行返回。

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

4

2 回答 2

3

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

因此，例如，对于基于 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/

于 2015-04-30T16:16:06.183 回答
1

我已经删除了 %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/

于 2016-10-30T01:01:48.027 回答