当前位置: 首页 > 网络资源 > 正文

愚人节首页旋转倾斜特效代码

代码如下:

 

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>

 

运行效果是这个样子滴:

 

本文固定链接: http://www.zhzx.info/archives/525 | 赵泽鑫'S Blog

该日志由 赵泽鑫 于2016年04月01日发表在 网络资源 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 愚人节首页旋转倾斜特效代码 | 赵泽鑫'S Blog

愚人节首页旋转倾斜特效代码:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!