愚人节首页旋转倾斜特效代码
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> |
运行效果是这个样子滴：
