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

Question

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

Answer 1

您应该使用 transform-origin 来调整变换点，并创造性地使用定位属性。

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

CSS：< /strong>

#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>

Answer 2

没有权限也可以工作：100%
只需围绕左上角旋转 270 度，然后将其平移回新的 100% 宽度即可。

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

http://jsfiddle.net/zW7SP/