Question

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

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>

Answer 2

也可以无权工作：100％只需在左上方旋转270度，然后以新的100％宽度将其平移。

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

http://jsfiddle.net/zW7SP/

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

2 个答案: