PageRenderTime 46ms CodeModel.GetById 21ms app.highlight 18ms RepoModel.GetById 1ms app.codeStats 0ms

/css/style.css

https://bitbucket.org/sgospodarets/cross-browser-rotate-box
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}