CSS3 rotate3d 动画重复

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

我见过很多连续旋转的例子，但大多数使用旋转或变换，而不是 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);
    }
}

查看完整示例的 fiddle ，它在支持动画和 transform3d 的主要浏览器中工作:

fiddle : http://jsfiddle.net/8Sg3h/84/