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

【问题标题】：How do you align 270deg rotated text to top left?如何将 270 度旋转的文本对齐到左上角？
【发布时间】：2011-12-01 21:26:33
【问题描述】：

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

【问题讨论】：

你能用jsFiddle展示你目前拥有的东西吗？只是出于一个简单的原因，我不会为重新创建你已经拥有的东西而烦恼:)
jsfiddle.net/lomacar/jCaKM

标签： html css transform alignment

【解决方案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>

【讨论】：

这并不能解决问题。我解释说这个问题与旋转和对齐操作的顺序有关。
我做了一个小提琴，但你太快了！谢谢，这是{right:100%} 的巧妙解决方案。您应该使用此解决方案编辑您的答案。我想出了一个解决方案，包括在标题周围包裹一个转换 div 并将标题旋转 180 度。你的更优雅。
+1，非常感谢，我使用了这段代码，但将 position: absolute; 更改为 position: fixed; 以保持屏幕上的文本。

【解决方案2】：

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

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

http://jsfiddle.net/zW7SP/

【讨论】：

如果你的文本比页面的宽度宽，这有一点问题。例如，如果您尝试在手机上执行此操作，则文本将采用手机的宽度，然后在旋转时会换行 - 而不是填充屏幕高度。根据您的具体需求，有多种解决方案，但对于单行文本，您只需添加 width: 100vh; text-align: right;