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.
Comments
Post a Comment