实现div旋转一定的角度

top慢慢 2015-10-08 03:02:07
让一个div 旋转一定的度数,虽然
transform:rotate(-5deg);
-ms-transform:rotate(-5deg); /* IE 9 */
-moz-transform:rotate(-5deg); /* Firefox */
-webkit-transform:rotate(-5deg); /* Safari and Chrome */
-o-transform:rotate(-5deg);
这些可以做到。但是不兼容ie678,加上
filter:"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)"
在ie下面还是没有旋转,
用了一个jquery.rotate.min.js 发现这个js只能让图片旋转。
谁可以实现div旋转,兼容ie678.
谢谢大家啦
...全文
370 5 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
top慢慢 2015-10-11
  • 打赏
  • 举报
回复
谢谢你,这个方法好用
top慢慢 2015-10-09
  • 打赏
  • 举报
回复
可以是可以,但是只要这样做,在ie7中,这个旋转下面的div样式就没有用了,你试试下面的代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> 页面名称 </title> <style type="text/css"> .div { width: 300px; height: 200px; background: #f66; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779); } .aa{height:100px;width:200px;margin:20px auto;border:1px solid red;} </style> </head> <body> <div class="div">123</div> <div class="aa">aaa</div> </body> </html>
天际的海浪 2015-10-09
  • 打赏
  • 举报
回复
好像是ie浏览器7.0版本独有的bug,只要遇到 xxxx: (x"a b"); 这种格式,这之后的样式代码都无效了。 可以把之后的样式代码放到一个新的<style type="text/css"></style>中
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> 页面名称 </title>
<style type="text/css">
    .div {
        width: 300px;
        height: 200px;
        background: #f66;
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
    }
</style>
<style type="text/css">
 .aa{height:100px;width:200px;margin:20px auto;border:1px solid red;}
</style>
</head>
<body>
<div class="div">123</div>
<div class="aa">aaa</div>
</body>
</html>
香蕉猪 2015-10-08
  • 打赏
  • 举报
回复
css旋转就可以,,,,只是IE版本的写法要注意。。。
天际的海浪 2015-10-08
  • 打赏
  • 举报
回复
可以啊

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title> 页面名称 </title>
<style type="text/css">
	div {
		width: 300px;
		height: 200px;
		background: #f66;
		filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
	}
</style>
</head>
<body>
<div>123</div>
</body>
</html>

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧