如何将旋转270度的文本对齐到左上角？

Question

这应该是一个非常简单的问题。我有一个带有标题文本的方框，想要将其旋转-90度。我希望它是绝对定位的，以便单词的末尾被推入左上角。我可以很容易地将其与底部对齐，但问题在于，对于长度可变的文本，似乎无法使其在顶部对齐时始终保持在容器内部，因为像 {top: 0} 这样的操作会作用于变形之前的标题。对于我的目的，这只需要在Firefox中工作。如果CSS无法实现，我可以使用JavaScript，但你会认为这应该可以只使用CSS就能做到。

- Moss

---

你能用jsFiddle展示一下你目前的进展吗？只是因为我不想重新创建你已经有的东西 :) - thirtydot

http://jsfiddle.net/lomacar/jCaKM/ - Moss

Answer 1

你应该使用transform-origin来调整变换点，再加上一些对定位属性的巧妙运用。

http://jsfiddle.net/thirtydot/JxEfs/1/

CSS：

#box {
    padding: 30px;
    position: relative;
    border: 1px solid blue;
}
#box > div {
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 100%;
    white-space: nowrap;

    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
}

HTML:

<div id="box">
    hello
    <div>rotated!</div>
</div>

- thirtydot

---

那并不能解决问题。我已经解释过，这个问题与旋转和对齐操作的顺序有关。 - Moss

我做了一个 JSFiddle，但你太快了！谢谢，{right:100%}是个聪明的解决方案。你应该用这个方法编辑你的答案。我想到的解决方案是在标题周围包装一个旋转180度的变换 div。你的方案更加优雅。 - Moss

+1，谢谢，太棒了。我使用了这段代码，但将 position: absolute; 更改为 position: fixed; 以使文本保持在屏幕上。 - Jim

Answer 2

可以不使用right:100%这个属性，而是将元素绕左上角旋转270度，然后再将其平移回新的100%宽度。

transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;

http://jsfiddle.net/zW7SP/

- Gerben Versluis

---

如果您的文本宽度超过页面宽度，那么这里有一个小问题。例如，如果您尝试在手机上执行此操作，则文本将采用手机的宽度，然后旋转时将换行 - 而不是填充屏幕高度。根据您的确切需求，有许多解决方案，但对于单行文本，您只需添加 width: 100vh; text-align: right; 即可。 - Simon_Weaver