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

html css rotation typography
Dan picture Dan · Aug 23, 2013 · Viewed 28.8k times · Source

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:

enter image description here

Answer

meub picture meub · Aug 23, 2013

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

Related questions

Positions fixed doesn't work when using -webkit-transform

I am using -webkit-transform (and -moz-transform / -o-transform) to rotate a div. Also have position fixed added so the div scrols down with the user. In Firefox it works fine, but in webkit based browsers it's broken. After using the -webkit-transform, …

Read More
Rotate all html element (whole page) 90 degree with CSS?

I want to display every thing in the page rotated consistently and dependently 90 degree, I tried to do it but the result was inaccurate and each element rotated independently.

Read More
Rotate Text as Headers in a table (cross browser)

This is not a question. I just felt that after spending this much time figuring out how to do this I would hate myself if i didn't save it somewhere and I would be a lousy programmer if I didn't …

Read More