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

这应该是一个你会想到的非常简单的问题。我有一个带有一些标题文本的框，我想将其旋转 -90 度。我希望它是绝对定位的，以便单词的末尾被轻推到左上角。我可以很容易地将其对齐到底部，但问题是，对于可变长度文本，在对齐到顶部时似乎不可能始终将其保留在容器内，因为诸如{top: 0}对变换前的标题进行操作。就我的目的而言，这只需要在 Firefox 中工作。如果这是唯一的解决方案，我可以使用 javascript，但您可能会认为仅使用 CSS 即可完成。

你应该使用transform-origin https://developer.mozilla.org/en/CSS/-moz-transform-origin调整变换点，以及一些定位属性的创造性使用。

http://jsfiddle.net/thirtydot/JxEfs/1/ 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>