90度旋转文本,使用CSS刷新到页面右上角

Question

我知道如何使用CSS将文本旋转90度,但我试图将文本与页面的右上角(或父元素)对齐为90度旋转的自我.这可能吗？

例:

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;
}