Animate rotation effects based on ANIMATION.CSS

Share an animated rotation effect based on animation.css. This is a cool animated rotation effect code based on the CSS3 implementation. As follows:

Online preview Source Download

The implemented code.

HTML code:

 <Divclass= "Wrap">        <Divclass= "MOD_BG">            <Divclass= "BG1"></Div>            <Divclass= "Bg2"></Div>            <Divclass= "Bg3">                <Divclass= "Bg3_1"></Div>                <Divclass= "Bg3_2"></Div>                <Divclass= "Bg3_3"></Div>            </Div>            <Divclass= "Bg4"></Div>        </Div>        <Divclass= "Main"ID= "J_main">            <Divclass= "Mod_info1">                <Divclass= "Mod_info1__flash mod_info1__f"></Div>                <Divclass= "Mod_info1__flash1 mod_info1__f"></Div>                <Divclass= "Mod_info1__flash2 mod_info1__f"></Div>                <Divclass= "Mod_info1__flash3 mod_info1__f"></Div>                <Divclass= "Mod_info1__logo1 mod_info1__logoall"></Div>                <Divclass= "Mod_info1__logo2 mod_info1__logoall"></Div>                <Divclass= "Mod_info1__logo3 mod_info1__logoall"></Div>            </Div>        </Div>    </Div>    <Scripttype= "Text/javascript">        $('. Mod_info2__power3'). On ('mouseover', function(e) {$ ('. Mod_info2__power3'). addclass ('Play');        }); $('. Mod_info2__power3'). On ('mouseout', function(e) {$ ('. Mod_info2__power3'). Removeclass ('Play');        }); $('. Mod_info2__power1'). On ('mouseover', function(e) {$ ('. Mod_info2__power1'). addclass ('Play');        }); $('. Mod_info2__power1'). On ('mouseout', function(e) {$ ('. Mod_info2__power1'). Removeclass ('Play');        }); $('. Mod_info2__power2'). On ('mouseover', function(e) {$ ('. Mod_info2__power2'). addclass ('Play');        }); $('. Mod_info2__power2'). On ('mouseout', function(e) {$ ('. Mod_info2__power2'). Removeclass ('Play');        }); $('. Mod_info2__power4'). On ('mouseover', function(e) {$ ('. Mod_info2__power4'). addclass ('Play');        }); $('. Mod_info2__power4'). On ('mouseout', function(e) {$ ('. Mod_info2__power4'). Removeclass ('Play');        }); //setTimeout (function () {        //$ ('. Mod_info2__power3 '). addclass (' play ');        //$ ('. Mod_info2__power1 '). addclass (' play ');        //$ ('. Mod_info2__power2 '). addclass (' play ');        //$ ('. Mod_info2__power4 '). addclass (' play ');        //},1000);        //setTimeout (function () {        //$ ('. Mod_info2__power3 '). Removeclass (' play ');        //$ ('. Mod_info2__power1 '). Removeclass (' play ');        //$ ('. Mod_info2__power2 '). Removeclass (' play ');        //$ ('. Mod_info2__power4 '). Removeclass (' play ');        //},4000);    </Script>

via:http://www.w2bc.com/article/49698

Animate rotation effects based on ANIMATION.CSS