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

Question

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

我试图让它在 jsFiddle 中工作

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

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

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

是否可以使用 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（左上角）——这将允许我们在 dabblet.com 上省略“基于旋转文本长度硬编码的值” 演示

尝试设置它：

CSS：

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

Answer 3

我最终使用一个名为mbFlipText的小 jQuery 包装器生成的 SVG 来解决这个问题，以管理 IE 支持

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