Home > Web Front-end > HTML Tutorial > 实现div旋转一定的角度_html/css_WEB-ITnose

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-06-21 09:04:46
Original
1694 people have browsed it

让一个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>
Copy after login

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>
Copy after login

谢谢你,这个方法好用

Related labels:
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template