Image Rotation Using CSS
by Francis[ Edit ] 2012-10-09 18:34:30
In Css
<style>
.rotation
{
-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;
}
.rotation:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
</style>
In Html
<html>
<body>
<div>
<img class="rotation" src="face.jpg" />
<img class="rotation" src="world.jpg" />
</div>
</body>
</html>
Note:
In your example you can add more images in same class as "rotation".