Rotate image using CSS

how to rotate a image using CSS or rotate an image on Hover using CSS

Sometimes following questions occur in the mind are :

 How to rotate a image using css : the rotate image using css is the simple thing to be done your self in following steps -

 1. create a HTML file .

copy code from below and paste into your body tag 

<div class="row stripe" style="text-align: center;"> <div class="three columns" >  <div class="twelve columns seobox">  <a href="seo"> <img src="img/iconseo3.png" alt="best organic Search engine optimization services for you" /></a> <h3>SEO</h3> <p>An Ethical & Algorithmic SEO Service with Natural Links</p>  <p><a href="seo">View details<i class="icon-right-open-mini"></i></a></p>  </div> </div> <div class="three columns">  <div class="twelve columns seobox"> <a href="social-media-marketing"><img src="img/iconsmm3.png" alt="" /></a>  <h3>SMM</h3> <p>Social Media including video optimization & promotion</p> <p><a href="social-media-marketing">View details<i class="icon-right-open-mini"></i></a></p>  </div>  </div> <div class="three columns">  <div class="twelve columns smmbox"> <a href="web-design"><img src="img/iconwebdesign3.png" alt="mobile friendly web design services" /></a>  <h3>Design</h3>  <p>Contemporary, traditional and responsive Web Design</p>  <p><a href="web-design">View details<i class="icon-right-open-mini"></i></a></p> </div>  </div>  <div class="three columns">  <div class="twelve columns designbox"> <a href="web-development"> <img src="img/iconwebdevelopment3.png" alt="web and app development services" /></a> <h3>Development</h3>  <p>Custom user Friendly Design for Your Web and App</p> <p><a href="web-development">View details<i class="icon-right-open-mini"></i></a></p>  </div>  </div>  </div>

2.  now add following link in your head tag

<link rel="stylesheet" href="style1.css">

3. and now download following css from below link you to just copy and paste this link on browser and automatically a css file is to be downloaded.

Click Here

or just copy and paste a below code in your CSS file 

.stripe {  margin-top:2%; }  .seobox, .smmbox, .designbox {  padding: 0% 5%;  }  .seobox p, .smmbox p, .designbox p {  font-weight: lighter; text-align: center;  }  .seobox,.designbox {  text-align: center; overflow: hidden; position: relative; border-radius:20px;  }  .smmbox {  text-align: center; overflow: hidden; position: relative;border-radius:20px;  } .seobox h3,.designbox h3,.smmbox h3 {  font-size:2em; font-weight: lighter; }  .seobox a,.designbox a,.smmbox a {  color: #0075c4; }  .seobox a img,.designbox a img,.smmbox a img {  -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -o-transition: all ease 0.5s; -ms-transition: all ease 0.5s; transition: all ease 0.5s;  } .seobox a img:hover,.designbox a img:hover,.smmbox a img:hover {  -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg);  }

example: