Question

是否可以在IE中旋转文本

-moz-transform: rotate(330deg);  /* FF3.5+ */
    -o-transform: rotate(330deg);  /* Opera 10.5 */
    -webkit-transform: rotate(330deg);  /* Saf3.1+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg)"; /* IE8 */

为IE编写的行不起作用。

任何人都可以提供帮助。

修改。我想旋转文字

Answer 1

据我所知，IE中的旋转只能以90度的间隔进行。

点击此处的文档： http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx

Answer 2

你是否已经尝试过这种方式：

<div id="rotation">Try this rotation</div>

#rotation
{
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=..);
  -webkit-transform: rotate(330deg); 
  -moz-transform: rotate(330deg);    
  width:100px;
}

就像这个fiddle

一样

Answer 3

试试这个新例子..

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660253882408142, M12=0.5, M21=-0.5, M22=0.8660253882408142,sizingMethod='auto expand')"; /* IE6-8 */

这有效

如果您想要更多旋转角度，请访问http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm

Answer 4

正如已经指出的那样，您想要的解决方案取决于目标即版本。

您应该使用具有不同供应商前缀的所有转换

-vendor-transform : rotate(330deg);

对于不支持css旋转的ie版本，您可以将旋转转换为filter matrix并将其应用于元素。
Here's a site自动将css3转换转换为滤镜矩阵：

 /* IE8+ - must be on one line, unfortunately */ 
 -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, SizingMethod='auto expand')";

/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=0.8660254037844387,
        M12=0.49999999999999994,
        M21=-0.49999999999999994,
        M22=0.8660254037844387,
        SizingMethod='auto expand');

唯一的缺点是，为了使变换原点成为元素的中心，oyu必须提供该元素的宽度和高度。

在IE中旋转文字330度

4 个答案: