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

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/