Image rotate in css
Index.html
style.css
Index.html
| <html> <head> <title>....</title> <link href="style.css" rel="stylesheet" type="text/css" /> <body> <center> <a herf="" class="rotate"><img src="images/x-cart-ico.png" class="rotate"/></a> <a herf="" class="rotate"><img src="images/magento-icon1.png" class="rotate"/></a> <a herf="" class="rotate"><img src="images/opencart-logo1.png" class="rotate"/></a> <a herf="" class="rotate"><img src="images/wordpress-icon.png" class="rotate"/></a> </center> </body> </head> </html> |
style.css
| .rotate{ -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden; } .rotate:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); } |
No comments:
Post a Comment