CODEWITHSUNDEEP
csscss-animationsrotateanimation
Jon
Jon

Reputation: 3203

CSS3 rotate3d animation repeating

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?

Upvotes: 5

Views: 8216

Answers (2)

KXXT
KXXT

Reputation: 271

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/

Upvotes: 2

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

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/

Upvotes: 5

Related Questions