In this blog, I use HTML5 with CSS3 using transition and transform property.
Here the initial size of the box or image is 200px and color is red. when we mouse hover on that image.
Then it rotate 5000 degree. for rotation of image i use "transform:rotate(5000 deg)".During rotation of box or image the box color is changed from red to green because initially i use red color but in hover i use green color. Here -webkit used for google chrome browser, -moz is used for mozilla firefox browser and -op is used for opera browser.
CODE
<html>
<head>
<style>
.box
{
width: 200px;
height: 200px;
margin: 100px;
box-shadow: 0px 0px 10px 10px #666666;
background-color: #F00;
-webkit-transition: width 8s, height 8s, background-color 8s, -webkit-transform 8s;
-moz-transition: width 8s, height 8s, background-color 8s, -moz-transform 8s;
-op-transition: width 8s, height 8s, background-color 8s, -op-transform 8s;
}
.box:hover
{
-webkit-transform: rotate(5000deg);
-moz-transform: rotate(5000deg);
-op-transform: rotate(5000deg);
background-color: #0F0;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>