CSS3 image rotate animation effect - Mostlikers

16 June, 2015

CSS3 image rotate animation effect

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. 

CSS3 image rotate animation effect


Live Demo               Download

HTML

<html>
<head>
  <title>mostlikers</title>
</head>
<body>
<img class="angle" src="profile.jpg" /> &nbsp;&nbsp; 
<img class="circle" src="profile.jpg" /> &nbsp;&nbsp;
<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.

"I'm someone who is open-minded to new experiences because they teach you new things.  "
                                             
                                         - Marilyn Manson








Related Topics

No comments:

Post a comment