旋转文本/除90度（静态）

Question

需要一种跨浏览器的方法来将一个div旋转90度，同时其中所有元素也会相应地旋转。这是为了静态放置（不是动画）。

最佳实践是什么？

- Jason

Answer 1

你可以使用CSS旋转一个div的内容：

/* FF Chrome Opera etc */
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
/* IE */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

编辑 添加了 Opera CSS

- johnny_bgoode

---

只有在支持此功能的浏览器中才能使用。快速找到这一点的方法是访问http://html5test.com/，查看第二个类别“Canvas”。 - Ben

@Steve 为什么这会与画布有关呢？这是CSS 2D变换 http://www.w3.org/TR/css3-2d-transforms - Šime Vidas

CSS3现在被认为是“跨浏览器”的吗？ - Steve Bennett

我找到了一个跨浏览器的jQuery插件，因为CSS3不是跨浏览器的。http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/ - Jason

Answer 2

如果有人在IE8中尝试实现此内容，请尝试以下CSS：

writing-mode: vertical-lr;
-ms-writing-mode: bt-lr; /* IE8 */

https://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

它对我有用！:)

- Ben