使用CSS旋转文本的灵活布局

Question

我正在尝试布局一个需要将文本标签旋转270度的控件。文本标签的宽度是可变的，在合理范围内（例如，100px到500px）。

我试图让它在jsFiddle

中运行

http://jsfiddle.net/ericjohannsen/LhjNq/3/

但遇到了一些我无法解决的问题：

1. 非旋转区域中的文本（jsFiddle中的黄色和橙色）向右移动了旋转文本的长度。
2. 旋转的文字远远低于关联的非旋转区域的底部，覆盖页面的其他部分。
3. 为了将标签保留在屏幕上，我必须使用基于旋转文本长度的硬编码值来应用 translate 变换。

是否可以使用CSS转换解决这些问题？

更新

这个jsFiddle使问题2.更明显

http://jsfiddle.net/ericjohannsen/LhjNq/47/

Answer 1

这是你想要的吗？

http://jsfiddle.net/thundercracker/LhjNq/53/

我认为纠正div高度的唯一解决方案是javascript。

为了摆脱额外的空间，我绝对定位了div。

我不认为IE的旋转值也是正确的，我将它们改为1.2并且似乎有效。但是仍然在研究如何让IE获得div的正确高度，这种方式不一样。

编辑：

IE实际上会改变元素的尺寸，所以你必须得到高度。同样在IE中，旋转的div必须位于容器的顶部，而不是像其他浏览器一样位于底部

编辑：更新了链接

Answer 2

所有转化都受transform-origin影响。默认情况下，它具有值50% 50%，这意味着所有转换都将相对于块的中心进行。

主要想法是将其更改为0 0（左上角） - 这将允许我们省略“基于旋转文本的长度进行硬编码的值” 的 demo on dabblet.com

尝试设置它：

<强> CSS：

transform: rotate(-270deg);
transform-origin: 0 0;

Answer 3

我最终使用由名为mbFlipText的小jQuery包装器生成的SVG来解决此问题来管理IE支持

http://jsfiddle.net/ericjohannsen/cgtu5/7/