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

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

Neither of the previous solutions work for any amount of text. You need to use 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

My first time answering something very new to this but here is the code:
<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

The solution is simple,add the rotation in text and position absolute.
<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>