CSS3 image rotate animation effect. recently i have used my project image rotate animation code it's very easy to set keyframe effects and apply transformation effect. You can manually change effect timing and rotation style. Follow the below code and learn how implement to your website.
HTML
<html> <head> <title>mostlikers</title> </head> <body> <img class="angle" src="profile.jpg" /> <img class="circle" src="profile.jpg" /> <img class="normal" src="profile.jpg" /> <br/> </body> </html>
CSS3
<style type="text/css"> .circle { border: solid 1px #dedede; width: 250px; padding: 4px; background-color: #fff; border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } .circle:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .angle { border: solid 1px #dedede; width: 250px; padding: 4px; background-color: #fff; border-radius: 20%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } .angle:hover { border-radius:0%; -webkit-transform: rotate(360deg); transform: rotate(360deg); } .normal { border: solid 1px #dedede; width: 250px; padding: 4px; background-color: #fff; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } .normal:hover { border-radius: 20%; -webkit-transform: rotate(360deg); transform: rotate(360deg); } </style>
Thank you for visiting. if have any queries write comments below.
- Marilyn Manson
No comments:
Post a Comment