如何让div进行旋转

最新推荐文章于 2021-06-16 00:46:50 发布

weixin_30448685

最新推荐文章于 2021-06-16 00:46:50 发布

阅读量374

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/brucehao/archive/2012/12/04/2801331.html

版权

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>输入框提示列表效果</title>
 6 <style type="text/css">
 7 .dir0{
 8     -webkit-transform: rotate(0);/*Safari 4+,Google Chrome 1+  */
 9     -moz-transform: rotate(0);/*Firefox 3.5+*/
10     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);/*ie*/    
11 }
12 
13 .dir1{
14     -webkit-transform: rotate(90deg);
15     -moz-transform: rotate(90deg);
16     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
17 }
18 
19 .dir2{
20     -webkit-transform: rotate(180deg);
21     -moz-transform: rotate(180deg);
22     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
23 }
24 
25 .dir3{
26     -webkit-transform: rotate(270deg);
27     -moz-transform: rotate(270deg);
28     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
29 }
30 
31 .box{width:120px;height:60px; border:solid 1px #333;}
32 </style>
33 
34 </script>
35 </head>
36 <body>
37 <div class="box dir0"></div>
38 <div class="box dir1"></div>
39 <div class="box dir2"></div>
40 <div class="box dir3"></div>
41 </body>
42 </html>

显示效果：

转载于:https://www.cnblogs.com/brucehao/archive/2012/12/04/2801331.html

weixin_30448685

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何让div进行旋转

View Code 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫