Ajax Loader
×
HTML
<link class="cssdeck" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
1
<link class="cssdeck" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
2
 
3
<div id="content"><span><img src="http://t2.gstatic.com/images?q=tbn:ANd9GcQPz35BgdUnWR5i93wEfGiLksTXAz9ses2ld8gHxAlVIHQght8u" /></span></div>
4
 
5
 
6
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS
body
1
body
2
{
3
 background:url(http://developer.jmbarcelon.com/Images/mobileheadback.jpg)top center; 
4
}
5
#content
6
{
7
  height:300px;
8
  width:300px;
9
  margin:10px auto;
10
  
11
  }
12
#content span img
13
{
14
  height:200px;
15
  width:200px;
16
  background:#ffffff;
17
  padding:5px;
18
  -webkit-transition:all 2s ease-in-out;
19
    -moz-transition:all 2s ease-in-out;
20
    -o-transition:all 2s ease-in-out;
21
    transition:all 2s ease-in-out;
22
}
23
#content span:hover img
24
{
25
  
26
    -webkit-transform:rotate(360deg);
27
    -moz-transform:rotate(360deg);
28
    -ms-transform:rotate(360deg);
29
    -o-transform:rotate(360deg);
30
    transform:rotate(360deg);
31
}
 

hover rotate

CSSDeck G+