/css/style.css
CSS | 51 lines | 48 code | 0 blank | 3 comment | 0 complexity | c0aafa6387f1a2b4701e2c228489b261 MD5 | raw file
1/* reset */
2body{
3 margin:0;
4 color:#000;
5 font:16px/18px Arial, Verdana, Tahoma, sans-serif;
6 background:#fff;
7}
8img{
9 border-style:none;
10 vertical-align: top;
11}
12/* styles */
13#wrapper{
14 width: 950px;
15 margin: auto;
16}
17.rotate-wrapper{
18 width: 100px;
19 height: 100px;
20 overflow: hidden;
21 position: relative;
22 border: 5px solid #ccc;
23 float: left;
24}
25.center-text{
26 position: absolute;
27 top: 0;
28 left: 0;
29 width: 100px;
30 line-height: 100px;
31 text-align: center;
32}
33.rotate{
34 position: relative;
35 float: left;
36}
37/* rotate image with CSS3 if possible */
38.csstransforms.csstransitions .rotate{
39 -webkit-transition: all .5s ease-in-out;
40 -moz-transition: all .5s ease-in-out;
41 -o-transition: all .5s ease-in-out;
42 -ms-transition: all .5s ease-in-out;
43 transition: all .5s ease-in-out;
44}
45.csstransforms.csstransitions .rotate-wrapper:hover .rotate{
46 -webkit-transform:rotate(90deg);
47 -moz-transform:rotate(90deg);
48 -o-transform:rotate(90deg);
49 -ms-transform:rotate(90deg);
50 transform:rotate(90deg);
51}