Rotate image 360deg when mouse hover using CSS 3

Adding rotation effect using the CSS3 transition property is posted below. Thanks david walsh for this code snippet

.image{     -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;       }     .image:hover   {     -webkit-transform:rotate(360deg);     -moz-transform:rotate(360deg);     -o-transform:rotate(360deg); }

Then just attach the class “image” with any image or text to rotate it 360 degree.

PRATHAVEE RAJ MOOND 

Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.