CODEWITHSUNDEEP
htmlcssrotation
Jordan
Jordan

Reputation: 237

CSS vertical text rotation alignment

I am trying to two rotate two divs that contain a small amount of text. The problem is that I want them to align vertically, but it seems they rotate from the center point so they don't align.

Anybody have any ideas?

HTML

<div id="header-one" class="rotate-90">
   header one
</div>

<div id="header-two" class="rotate-90">
   2014
</div>

CSS

#header-one {
   position:fixed;   
   right:0;
   top:33%;
}

#header-two {
   position:fixed;   
   right:0;
   top:66%;
}

.rotate-90 {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

** FIDDLE

http://jsfiddle.net/CS9s2/

Upvotes: 2

Views: 735

Answers (1)

Carter Sande
Carter Sande

Reputation: 1849

You need to use transform-origin to set the origin of the rotation. In this case, it makes sense to rotate each <div> around its top-right corner.

 .rotate-90 {
     -webkit-transform-origin: top right;
     -webkit-transform: rotate(90deg);
     /* other vendor prefixes */
 }

Upvotes: 4

Related Questions