html - 90 degrees rotated text, flush to page top-right with CSS

Question

I know how to rotate text 90 degrees using CSS, but I'm trying to align the text to the top-right of the page (or a parent element) as its 90-degree-rotated self. Is this possible?

Example:

Answer 1

以前的解决方案都不适用于任何数量的文本。您需要使用转换原点。

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