在IE8及以下版本中使用CSS将图像旋转90度

Question

如何在IE 8及以下版本中，仅使用CSS实现旋转90度？

.horizontal {
   display: block;
   width: 300px;
   height: 100px;/*height*/
   background: #FF0000;
   margin: auto;
   margin-top: 110px;
   text-align: center;
   border: 5px solid #000000;

   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

- Ronny Perez

---

如果您不能使用额外的替代方法，那么您注定会失败，因为在IE8中没有其他方法。最好在IE8中显示消息，请升级您该死的浏览器。 - Hushme

兄弟，我知道，但你认为静态ms过滤器怎么样？问题是我不知道如何使用这些过滤器。有什么建议吗？ - Ronny Perez

@Enigma，然而，我们期望问题能够展示出研究的努力。 - tckmn

有人能帮我解决这个问题吗？谢谢。 - Ronny Perez

Answer 1

你想要使用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); CSS

.horizontal {
    display: block;
    width: 300px;
    height: 100px;/*height*/
    background: #FF0000;
    margin: auto;
    margin-top: 110px;
    text-align: center;
    border: 5px solid #000000;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

点击此处获取更多信息

- 3dgoo

---

等等，但是旋转=3不是270度吗？我只需要90度。 - Ronny Perez

rotation=3 将会旋转270度或者-90度，就像你在其他的CSS变换语句中所使用的一样。如果你想将它们全部旋转90度，那么你需要设置 rotation=1。 - 3dgoo

Answer 2

writing-mode 是 CSS3 草案规范中的一项属性，可以实现文本旋转，无需使用专有属性，有效地为概念未来做好准备，随着更多浏览器采用 CSS3 草案规范。

p { writing-mode: tb-rl; }

这是一种非常简单的CSS技术，随着各大浏览器对CSS3的支持越来越好，这种技术最终将适用于所有浏览器。这是IE支持的少数几个CSS3属性之一。tb-rl值告诉浏览器显示段落的文本从上到下，从右到左流动。实际上将文本顺时针旋转90度并靠右对齐。

此属性的真正目的是以其正确的“书写模式”显示其他语言，例如日语从右到左或阿拉伯语和希伯来语从右到左和从上到下（rl-tb）。

支持：

目前，只有IE从IE5.5开始支持它，并通过使用-ms扩展在IE8中添加了更多值。IE5.5+提供4个可用值，而IE8+通过-ms扩展提供了另外4个值。

- lr-tb - 这是默认值，从左到右，从上到下 - rl-tb - 这将文本从右到左，从上到下流动 - tb-rl - 从上到下，从右到左垂直流动文本 - bt-rl - 从下到上，从右到左 - tb-lr - 只有在IE8+中使用-ms-writing-mode时才可用。文本从上到下，从左到右流动 - bt-lr - 从下到上，从左到右 - lr-bt - 从左到右，从下到上 - rl-bt - 从右到左，从下到上

在其他浏览器中旋转文本？

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Online Demo

-ms-writing-mode property

- Jebasuthan