Rotate Image 360

Rotate Image 360 degree using Jquery & CSS

Add animation effect without flash using jquery and css. Add following code of block under HEAD section and before BODY section.

<style>

.rotate{
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;

-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);
}

</style>

<body>

<img src=”Demo1.png” class=”rotate” />

</body>

Advertisements