Rotate Vertically a Text in HTML using CSS

Spacing is a very important part of designing. Making the most out of each spaces without compressing your contents is a difficult job for every designers. Most of the time they find a vertical space that needs to be filled out of either images or text.

Placing Text Vertically

Before, the easiest way to resolve that is to place a vertical image of the text. The problem with this is, we all know that adding an extra image means additional loading time. Also, when you grew tired of the said text in it, it would be a hasle to create another image everytime you want to change it.

Demo

01
APRIL

See the date on this post (the April 1 on the right side). Observe that the month was tilted by 90 degrees to attain a nice display.

Solution

Using CSS we can actually place a text vertically in a HTML. This solution rotates the text (or phrase) to a specific degree to create a vertical view of the said string.

Code

Just use this code to rotate a given element. Simply replace the value of degrees to your desired value to attain different results.

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);

Note that you are actually rotating an image from a certain point so doing this technique, you will need to adjust the positioning of the element.