jquery - Make a 3D CSS3 element rotate continously -


i have implemented simple two-sided element rotates y axis using css3 transform: rotatey() property based on examples @ http://css3playground.com/flip-card.php.

i can make rotate on hover or set interval, i'm trying make spin continuously. have following script, i'm having trouble "resetting" transform appears spin in 1 direction, far rocks , forth.

setinterval(function() {         $('.hover').removeclass('reverse').addclass('flip');     settimeout(function() {         $('.hover').removeclass('flip').addclass('reverse')     }, 1500); }, 3000); 

i'll spare css, it's same what's on example page. however, .reverse class clone of .flip, values transform: rotatey() try bring start in same direction.

you need use keyframe animations. should 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 demo did while back.

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


Comments

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -