html - 90 度旋转文本，与 CSS 齐平到页面右上角

Question

我知道如何使用 CSS 将文本旋转 90 度，但我试图将文本对齐到页面(或父元素)的右上角，作为其旋转 90 度的 self 。这可能吗？

例子:

Answer 1

前面的解决方案都不适用于任何数量的文本。你需要使用 transform-origin。

<div class="container">
<span class="rotate">Hello THERE!</span>
</div>

.rotate {

    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;

    position: absolute;
    top: 0;
    left: 100%;
    white-space: nowrap;    
    font-size: 48px;
}