如何让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"> 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>
显示效果：
