在 IE8 及更低版本的 CSS 中旋转 90 度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17915807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating 90 degrees in CSS in IE8 and lower
提问by Ronny Perez
How can I rotate 90 degrees in IE 8 and lower, using only CSS?
如何仅使用 CSS 在 IE 8 及更低版本中旋转 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);
}
回答by 3dgoo
You want to use filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
你想用 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
CSS
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);
}
回答by Jebasuthan
writing-modewhich is currently in the CSS3 draft specification allows us to accomplish text rotation without using propriety properties, effectively future proofing the concept as more browsers adopt the CSS3 draft spec.
目前在 CSS3 草案规范中的writing-mode允许我们在不使用专有属性的情况下完成文本旋转，随着越来越多的浏览器采用 CSS3 草案规范，有效地证明了未来的概念。
p { writing-mode: tb-rl; }
That's it incredibly simple CSS technique that will eventually work with all browsers as their CSS3 support gets better. This is one of the handful of CSS3 supported properties in IE. The tb-rl value tells the browser to display paragraphs with the text flowing from top to bottom, right to left. Essentially rotating the text 90 degrees clockwise and aligning to the right.
这就是令人难以置信的简单 CSS 技术，随着它们对 CSS3 的支持变得更好，最终将适用于所有浏览器。这是 IE 中少数支持 CSS3 的属性之一。tb-rl 值告诉浏览器显示文本从上到下、从右到左流动的段落。本质上是将文本顺时针旋转 90 度并向右对齐。
This properties true intention is for displaying other languages in their correct “writing mode” such as Japanese right to left or Arabic & Hebrew which display right to left & top to bottom (rl-tb).
此属性的真正意图是以正确的“书写模式”显示其他语言，例如从右到左显示的日语或从右到左和从上到下显示的阿拉伯语和希伯来语 (rl-tb)。
Support
支持
At the moment IE is the only browser to support it starting from IE5.5 and up, IE8 adds further values through using the -ms extension. There are 4 values available from IE5.5+ and an additional 4 values for IE8+ through the -ms extension.
目前 IE 是唯一从 IE5.5 开始支持它的浏览器，IE8 通过使用 -ms 扩展添加了更多的值。IE5.5+ 有 4 个可用值，IE8+ 有另外 4 个值（通过 -ms 扩展）。
- lr-tb – This is the default value, left to right, top to bottom
- rl-tb – This flows the text from right to left, top to bottom
- tb-rl – Flows the text vertically from top to bottom, right to left
- bt-rl – bottom to top, right to left
- tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
- bt-lr – Bottom to top, left to right
- lr-bt – Left to right, bottom to top
- rl-bt – Right to left, bottom to top
- lr-tb - 这是默认值，从左到右，从上到下
- rl-tb – 这将文本从右到左，从上到下流动
- tb-rl – 从上到下，从右到左垂直排列文本
- bt-rl – 从下到上，从右到左
- tb-lr – 此值和以下值仅在使用 -ms-writing-mode 的 IE8+ 中可用。文本从上到下，从左到右流动
- bt-lr – 从下到上，从左到右
- lr-bt – 从左到右，从下到上
- rl-bt – 从右到左，从下到上
Rotate text in other browsers?
在其他浏览器中旋转文本？
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
