1

CSS3 and IE9

CSS3:

As of the writing of this article (early 2011), the specifications for CSS3 are incomplete. So, this article will focus only on CSS that can be used now to create vertical text in most modern browsers. Though most of the code we will use are proprietary properties, they are preparatory to CSS3.

IE9:

Internet Explorer 9 was not fully developed when this article was written, so though this browser may support CSS3 properties in the form of -ms-transform, it was not ready for widespread use to rotate or make vertical text, and will not be covered in this article.

Set the stage

I will create a container element and a stylized element to rotate. The block of code below is not necessary to rotate text.

This code is for clarity only. It is not necessary to rotate text.
  1. .rotate-container {
  2.     height: 100px;  width: 100px;  margin: 0px auto;
  3.     border: 1px solid #949494;  background-color: #EFEFEF;
  4. }
  5. .rotate-demo {
  6.     height: 30px;  line-height: 30px;  text-align: center;
  7.     border: 1px solid #A2D700;  background-color: #F6F6F6;
  8. }
Our Element

Mozilla (Firefox), Webkit (Safari & Chrome), Opera

If you are using IE to view this page, the following examples will not appear correctly.

transform: rotate(Ndeg);

Below are the CSS properties to rotate an element. First, we will use rotation to create vertical text for Mozilla, Webkit, and Opera.

These will rotate our element 90° clockwise.
  1. .rotate-90 {
  2.     -o-transform: rotate(90deg);
  3.     -moz-transform: rotate(90deg);
  4.     -webkit-transform: rotate(90deg);
  5. }
 		These will rotate our element 270° clockwise.
  1. .rotate-270 {
  2.     -o-transform: rotate(270deg);
  3.     -moz-transform: rotate(270deg);
  4.     -webkit-transform: rotate(270deg);
  5. }
Our Element
→
Element at 90°
Our Element
→
Element at 270°

transform-origin: value value;

The element above was rotated 90° clockwise, but it doesn't seemed to be aligned to anything. That's because the origin of rotation is exactly in the middle of the element. The transform-origin property can fix this by telling the element where to rotate from.

These will set the rotation from the top left.
  1. .rotate-90 { /* ... */ }
  2. .origin-tl {
  3.     -o-transform-origin: top left;
  4.     -moz-transform-origin: top left;
  5.     -webkit-transform-origin: top left;
  6. }
 		These will set the rotation from the top right.
  1. .rotate-270 { /* ... */ }
  2. .origin-tr  {
  3.     -o-transform-origin: top right;
  4.     -moz-transform-origin: top right;
  5.     -webkit-transform-origin: top right;
  6. }
Our Element
→
Element at 90°
Our Element
→
Element at 270°


The above result may be just what you want. If so, that's great! But to align your element back inside the container, use position: relative and left or right to push the element into place. Notice the element offset is equal to its own height plus border.

Push element left equal to its height.
  1. .rotate-90  { /* ... */ }
  2. .origin-tl  { /* ... */ }
  3. .fix-rotate-90 {
  4.     position: relative;
  5.     left: 32px;
  6. }
 		Push element right equal to its height.
  1. .rotate-270 { /* ... */ }
  2. .origin-tl  { /* ... */ }
  3. .fix-rotate-270 {
  4.     position: relative;
  5.     right: 32px;
  6. }
Our Element
→
Element at 90°
Our Element
→
Element at 270°


The next step is to create the same effect in Internet Explorer. This is now covered in our CSS article, Vertical Text in Internet Explorer.

More CSS Text Effects

Questions About Rotated or Vertical Text?

We realize that was a long tutorial on rotated and vertical text so you might have some questions. As a Shenzhen, China web design company we make it a point to interact with development community as much as possible. So if you have a question about rotated or vertical text leave us a comment and we will see if we can answer it for you.

Let's get started!

Let's get into contact so you learn more about us and we can create solutions for you!