hover rotate

<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

{

 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;

  -webkit-transition:all 2s ease-in-out;

    -moz-transition:all 2s ease-in-out;

    -o-transition:all 2s ease-in-out;

    transition:all 2s ease-in-out;

}

#content span:hover img

{

    -webkit-transform:rotate(360deg);

    -moz-transform:rotate(360deg);

    -ms-transform:rotate(360deg);

    -o-transform:rotate(360deg);

    transform:rotate(360deg);

}