实现div旋转一定的角度_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

实现div旋转一定的角度_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:04 AM

让一个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.
谢谢大家啦

回复讨论(解决方案)

可以啊

<!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>

登入後複製

css旋转就可以，，，，只是IE版本的写法要注意。。。

可以是可以，但是只要这样做，在ie7中，这个旋转下面的div样式就没有用了，你试试下面的代码

页面名称

123

aaa

好像是ie浏览器7.0版本独有的bug，只要遇到 xxxx: (x"a b"); 这种格式，这之后的样式代码都无效了。

可以把之后的样式代码放到一个新的中

<!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>

登入後複製

谢谢你，这个方法好用

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn