<html>
<head>
<title>Rotate my Image</title>
<link rel="stylesheet" type="text/css" href="rotate_style.css" />
</head>
<body>
<img src="5.png" alt="myImage">
</body>
</html>
Then: do the rotate_style.css
img{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
height: 450px;
width: 450px;
-webkit-transition-property: transform;
-moz-transition-property: transform;
transition-property: transform;
}
img:hover{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
height: 900px;
width: 900px;
}
After this code. run index.html in your browser and hover the image. ENJOY! ^_^
