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 ではなく、rotate または transform を使用しています。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 に答える