愚人节首页旋转倾斜特效代码
Apr012016
代码如下:
01 |
<!DOCTYPE html> |
02 |
< html lang = "en" > |
03 |
< head > |
04 |
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > |
05 |
< title >IE浏览器CSS transform旋转属性的演示</ title > |
06 |
< meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE8" /> |
07 |
< style type = "text/css" > |
08 |
body { |
09 |
font-family: "Arial", sans-serif; |
10 |
} |
11 |
12 |
#ptOfRef { |
13 |
border: #000 solid 3px; |
14 |
background: #6FF; |
15 |
width: 204px; |
16 |
height: 204px; |
17 |
position: absolute; |
18 |
top: 100px; |
19 |
left: 100px; |
20 |
} |
21 |
22 |
#example { |
23 |
position: absolute; |
24 |
top: 100px; |
25 |
left: 100px; |
26 |
border: #09F solid 1px; |
27 |
background: #F90; |
28 |
font-weight: 900; |
29 |
color: #FFF; |
30 |
padding: 10px; |
31 |
display: block; |
32 |
width: 200px; |
33 |
height: 200px; |
34 |
margin-top: -1px; |
35 |
margin-left: -1px; |
36 |
transform: rotate(40deg); |
37 |
-o-transform: rotate(40deg); |
38 |
-webkit-transform: rotate(40deg); |
39 |
-moz-transform: rotate(40deg); |
40 |
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', |
41 |
M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, |
42 |
M22=0.7660444431189779)"; |
43 |
} |
44 |
</ style > |
45 |
<!--[if IE]> <style type="text/css"> #example { top: 50px; left: 50px; } </style> <![endif]--> |
46 |
</ head > |
47 |
< body > |
48 |
< div id = "ptOfRef" ></ div > |
49 |
< div id = "example" >这是一个CSS旋转属性的演示</ div > |
50 |
</ body > |
51 |
</ html > |
运行效果是这个样子滴: