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

Answer 2

我第一次回答一些非常新的内容，但这里是代码：

<div id="block">
<p id="rotate">Hello!!!</p>
</div>

<style>
#block{
    width:500px;
    height:500px;
    display:block;
    margin:auto;
    border: 1px solid #000;
    position:absolute;
    }

#rotate {
    position:relative;/* place the text relateve to whatever tag is devined as absolute */
    left:130px;/* change these dimensions - can use left or right */
    top:20px;/* change these dimensions  can use top or bottom*/
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);

}
</style>

Answer 3

解决方案很简单，在文本中添加旋转并定位绝对值。

<style>
#block{
    width:500px;
    height:500px;
    display:block;
    margin:auto;
    border: 1px solid #000;
    position:relative;
    }

#text {
    padding:0;
    margin:0;
    position:absolute;
    right:0;
    font-size:30px;
    top:40px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
</style>
<div id="container">
<p id="text">Hello!!!</p>
</div>