hover rotate
image rotate on hover
image rotate on hover
<link class="cssdeck" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<link class="cssdeck" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<div id="content"><span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQPz35BgdUnWR5i93wEfGiLksTXAz9ses2ld8gHxAlVIHQght8u" /></span></div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
body
body
{
background:url(http://developer.jmbarcelon.com/Images/mobileheadback.jpg)top center;
}
#content
{
height:300px;
width:300px;
margin:10px auto;
}
#content span img
{
height:200px;
width:200px;
background:#ffffff;
padding:5px;
transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
#content span:hover img
{
transform:rotate(360deg);
transform:rotate(360deg);
transform:rotate(360deg);
transform:rotate(360deg);
transform:rotate(360deg);
}