webkit核心浏览器使用和火狐浏览器使用transform可以做到旋转，IE要使用DXImage滤镜，代码如下：transform:rotate(90deg);-ms-transform:rotate(90deg); /* Internet Explorer 9*/-moz-transform:rotate(90deg); /* Firefox */-webkit-transform:rotate(90deg); /* Safari 和 Chrome */-o-transform:...
div 文字 css旋转问题
IE必须支持，不要妄下定论，IE滤镜是很强大的，简单的是各种90度转，复杂的可以任意角度。
<div style="height: 50px; width: 100px; margin-top:100px; background:#96d171;-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);">你好啊</div>
你自己试试，其中filter中rotation=1，这个1可以是0、1、2、3四个值分别是四个方向，有别的问题可以继续问2013-03-06
webkit核心浏览器使用和火狐浏览器使用transform可以做到旋转，IE要使用DXImage滤镜，代码如下：
transform:rotate(90deg);-ms-transform:rotate(90deg); /* Internet Explorer 9*/-moz-transform:rotate(90deg); /* Firefox */-webkit-transform:rotate(90deg); /* Safari 和 Chrome */-o-transform:rotate(90deg); /* Opera */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);代码如下：
<html><head> <title>Untitled</title> <style> .div1 { width: 100px; height: 30px; transform:rotate(90deg); -ms-transform:rotate(90deg); /* Internet Explorer 9*/ -moz-transform:rotate(90deg); /* Firefox */ -webkit-transform:rotate(90deg); /* Safari 和 Chrome */ -o-transform:rotate(90deg); /* Opera */ filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); border:1px solid #4EC83B; } </style></head><body></br></br></br><div class="div1">我旋转了</div></br></br></br><div style="-ms-writing-mode:tb-rl;border:1px solid #4EC83B;width: 30px;height: 100px;">Hello World!</div></body></html>效果如下：
对于英文，IE还有一种方式，使用-ms-writing-mode，中文只能竖排，不能旋转，英文可以
-ms-writing-mode:tb-rl
2015-12-22
div{width:200px;
height:200px;
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
ie不支持哦2013-03-06
-webkit-transform: rotate(90deg);/*Safari 4+,Google Chrome 1+ */
-moz-transform: rotate(90deg);/*Firefox 3.5+*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);/*ie*/
这个应该可以实现，试试吧。2013-03-06
你不这样行不，不兼容的，做个图片把2013-03-06
这个只能做图片 。。。2013-03-06
<!DOCTYPE HTML><html><head><meta charset=UTF-8><title>YuGiOh</title><style type="text/css">#div {position: absolute;top: 50px;left: 300px;width: 300px;height: 300px;line-height: 300px;text-align: center;border: 1px solid black;}</style><script type="text/javascript" src="jquery-1.8.0.min.js"></script><script type="text/javascript">var rotateHTML5 = function (limit) { var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i; var wt = div.style['-webkit-transform'], wts = wt.match (reg); var $2 = RegExp.$2; console.log ($2); div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4); } var rotateIE = function (obj) { var d = !!obj.d ? obj.d : 1; var r = d * Math.PI / 180; costheta = Math.cos (r); sintheta = Math.sin (r); obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"; var item = obj.filters.item (0); var width = obj.clientWidth; var height = obj.clientHeight; item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2; item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2; item.M11 = costheta; item.M12 = -sintheta; item.M21 = sintheta; item.M22 = costheta; obj.timer = setTimeout (function () { var dx = d + 1; dx = dx > 360 ? 1 : dx; obj.d = dx; rotate (obj, dx); }, 30); }; var start = function () { if (!!div.interval) { clearInterval (div.interval); delete div.interval; } else { div.interval = setInterval (function () { /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div); }, 30); } }</script></head><body><button onclick="start();">rotate</button><div id="div" style="border-radius: 90px; -webkit-transform: rotate(10deg);">ROTATE</div></body></html>2015-02-05
