Image Rotation Using CSS

by Francis 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".
1194
like
0
dislike
0
mail
flag

You must LOGIN to add comments