4

您好我正在尝试旋转文本，但我在使用 IE 8 和 9 时遇到了一些问题

.casaText{
     display:block;     
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-filter:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    position:relative;

在 IE 中它不会旋转。有谁能告诉我为什么？？

谢谢

4

4 回答 4

1

我猜是这个属性导致了问题：

-ms-filter:rotate(-90deg);

我不知道有任何这样的专有 IE 过滤器。尝试这个：

.casaText{
     display:block;     
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    white-space:nowrap;
    position:relative;
}
于 2011-08-29T20:17:19.173 回答
1

使用 Matrix 进行旋转：

这里是为了-90deg

filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
于 2012-04-07T00:37:55.797 回答
1

你的代码有错误

-ms-filter:rotate(-90deg);

对于跨浏览器旋转，请使用css3please.com中的此语法，在您的情况下如下所示：

.casaText{
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(-90deg);  /* FF3.5+ */
        -ms-transform: rotate(-90deg);  /* IE9 */
         -o-transform: rotate(-90deg);  /* Opera 10.5 */
            transform: rotate(-90deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, sizingMethod='auto expand'); /* IE 6-9 */
                 zoom: 1; /* IE hasLayout trigger */
}
于 2012-03-20T12:23:55.480 回答
0

我使用了以下，效果很好。我是从 css-tricks.com 找到的（不得不说这是一个很棒的资源）。无论如何，为我工作。我意识到这有点晚了 - 哈 - 但也许它会帮助像我一样找到这个的其他人。

filter:progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12, M21=$m21, M22=$m22, sizingMethod='auto expand');
于 2012-04-07T00:32:04.013 回答