Post
Ask Question

How to Rotate any Image in HTML5

How to Rotate any Image in HTML5 

 
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 rotates 5000 degrees. 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
  1. <html>  
  2.     <head>  
  3.         <style>  
  4.         .box  
  5.         {  
  6.             width: 200px;  
  7.             height: 200px;  
  8.             margin: 100px;  
  9.             box-shadow: 0px 0px 10px 10px #666666;  
  10.             background-color: #F00;  
  11.             -webkit-transition: width 8s, height 8s, background-color 8s, -webkit-transform 8s;  
  12.             -moz-transition: width 8s, height 8s, background-color 8s, -moz-transform 8s;  
  13.             -op-transition: width 8s, height 8s, background-color 8s, -op-transform 8s;  
  14.         }  
  15.         .box:hover  
  16.         {  
  17.             -webkit-transform: rotate(5000deg);  
  18.             -moz-transform: rotate(5000deg);  
  19.             -op-transform: rotate(5000deg);  
  20.             background-color: #0F0;  
  21.         }  
  22.     </style>  
  23.     </head>  
  24.     <body>  
  25.         <div class="box"></div>  
  26.     </body>  
  27. </html>  
Next Recommended Reading Canvas Rotate Method in HTML5