CSS3 rotate3d animation repeating

Question

I have this animation:

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/

I'd like the square to spin one way infinitely. At the moment it spins on all axis from 0 to 360 and then it spins from 360 back the same way to 0. I'd like it to keep going one way, not go back on itself.

I've seen many examples of continuous spinning but most of them use rotate or transform, and not rotate3d. Is it possible to spin something infinitely using CSS rotate3D?

This [works in Chrome](http://jsfiddle.net/8Sg3h/1/). Must be a browser-specific issue. — James Donnelly, Oct 31 '13 at 12:46

score 4 · Answer 1 · answered Apr 30 '15 at 16:16

The syntax is correct, but you need to include the browser-specific keyframe animations with their browser-specific transforms:

So, for Webkit based browsers for example, you need to add this:

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);
    }
}

Check the fiddle for the complete example, it's working in major browsers who support animation and transform3d:

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

Are you sure that this is correct? I would think that for example the Opera browser would ignore the whole keyframes block because it begins with -webkit-. So I guess you have to move each of the browser specific transforms into its own browser specific keyframe block. Like so: @-ms-keyframes spinner {0%{ -ms-transform: rotate3d(1,1,1,0deg);}} 50%{...}...} — Humppakäräjät, Jul 04 '15 at 14:22
@Humppakäräjät: You're right, this is just to not have to write too much code, you can see the entire example in the linked Fiddle. — Tomas Ramirez Sarduy, Jul 06 '15 at 14:26
Of course I didn't check the Fiddle ;-) Now I checked it... can't you remove all of the browser specific transforms from the blocks that don't target that specific browser? For example you got '-ms-transform's in the '-webkit-keyframes' block but you also have a '-ms-keyframes' block with the '-ms-transform's. — Humppakäräjät, Jul 06 '15 at 17:01

score 1 · Answer 2 · answered Oct 30 '16 at 01:01

I've removed the keyframe at %50 percent,
and now the square seems to rotate in one direction.

Before:

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

After:

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

Fiddle// http://jsfiddle.net/8Sg3h/138/

CSS3 rotate3d animation repeating

2 Answers2