CODEWITHSUNDEEP
htmlcssrotationtypography
Dan
Dan

Reputation: 1191

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

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

Upvotes: 11

Views: 34111

Answers (3)

meub
meub

Reputation: 2318

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

Upvotes: 29

Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

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>

Upvotes: 0

henk.io
henk.io

Reputation: 306

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>

Upvotes: 1

Related Questions