Make a 3D CSS3 element rotate continously

Question

I have implemented a simple two-sided element that rotates about the Y axis using the CSS3 transform: rotateY() property based on the examples at http://css3playground.com/flip-card.php.

I can make it rotate on hover or a set interval, but I'm trying to make it spin continuously. I have the following script, but I'm having trouble "resetting" the transform so that it appears to only spin in one direction, so far it just rocks back and forth.

setInterval(function() {
        $('.hover').removeClass('reverse').addClass('flip');
    setTimeout(function() {
        $('.hover').removeClass('flip').addClass('reverse')
    }, 1500);
}, 3000);

I'll spare you the CSS, it's basically the same as what's on that example page. However, the .reverse class is just a clone of .flip, with values for transform: rotateY() to try to bring it back to the start in the same direction.

Answer 1

You need to use keyframe animations. Should be something like this.

        @-webkit-keyframes rotate-full {
            0% {
            -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
          }

          50% {
            -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
          }

          100% {
            -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
          }
        }

Heres in example of a demo I did a while back.

http://codepen.io/jeffpowersd/pen/mCbhq