Question

我已经阅读了Stack Overflow上的一些其他帖子并做了一些谷歌搜索，但到目前为止还没有看到任何实际工作。

我有一个h2我想在所有浏览器和IE6 / 7中旋转270度。所有浏览器，FF，Safari，Chrome，IE7等都可以旋转文本，但IE6只是不会旋转270.我只能旋转90，这不是我需要的。

这是HTML：

<div class="tab-content">
    <h1>Lorem Ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>

这是CSS：

.tab-content h1 {
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand');
    zoom: 1;
    font: 15px Arial, Helvetica, sans-serif;
    color: #4b4b4c;
    text-transform: uppercase;
}

我试过

writing-mode: tb-rl;
filter: flipv fliph;

同样会将它旋转90度，但不会像我想要的那样旋转270度。

我厌倦了＆amp;没有变焦：1;而且我的想法已经不多了。任何人都很好地掌握了ie6中的旋转文本？有很多关于旋转图像的文章，但在文本上并不多，我认为它将是相同的图像或标题......

Answer 1

您正在使用的matrix转换滤镜可以旋转任意角度，因此您可以根据需要将其旋转到270度。它有一些怪癖，但确实有效。矩阵数学是如此痛苦，这简直是一种耻辱。本文非常好地概述了如何计算角度：http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

但是如果你特别想要旋转270度，那么你不需要使用（坦率的）matrix过滤器，因为IE也有一个更加友好的BasicImage过滤器。

试试这个：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

BasicImage过滤器仅在您想要以90度的倍数旋转时才有用。还有别的，你需要进行矩阵变换。

rotation=3告诉它旋转90度，3次 - 即270度。

希望有所帮助。

仅在IE6中将文本旋转270度

1 个答案: