In this example, we’ll talk about the rotate value of the transform property of css and specifically about rotating text elements in html.
Because the rotation of text is achieved using the transform property, like for other element rotation, it is supported by all modern browsers.
You may use text rotation using css when you want to have fancy text around your webpage or when it is part of your website style.
Let’s first see the basic application and then cases and examples of a more advanced use of this considering nicely designed cases.
1. Basic Setup and Application
Go ahead and create a new html document and add the basic sytnax in it like so:
<!DOCTYPE html> <html> <head> <title>CSS Rotate Text Example</title> </head> <body> <!-- STYLE SECTION --> <style type="text/css"> </style> <!-- HTML SECTION --> </body> </html>
To apply text rotation lets first explain what is behind it in css:
1. transform – css property that specifies object transformation
2. rotate – defines specifically the kind of transformation that is going to happen
3. (numberdeg) – specifies the value of degrees in which the rotation will occur
Add a text line in html to create a text element:
<!-- HTML SECTION --> <h2>This is the rotated text.</h2>
Now go over css and refer to h2 to give it rotation attributes like below:
<!-- STYLE SECTION -->
<style type="text/css">
h2 {
transform: rotate(-20deg);
}
</style>
Considering cross-browser compatibility, you would have to take into consideration this approach:
h2 {
/* Safari */
-webkit-transform: rotate(-20deg);
/* Firefox */
-moz-transform: rotate(-20deg);
/* IE */
-ms-transform: rotate(-20deg);
/* Opera */
-o-transform: rotate(-20deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The rotated text would look like this in the browser:
2. Cases and Examples
In this section we’ll see some nice applications of the text rotation accross webpages you might consider using.
2.1 Date Example
Here lets turn things comfortable to create a date view using some rotated text. Basically, it is just playing around with
positioning and margins/padding alongside with the transform property in order to rotate text. Create the markup below:
<!-- HTML SECTION --> <h2 class="date">31</h2> <h2 class="month">JUNE</h2> <h2 class="year">2015</h2>
Above, I have added three h2 tags and given specific classes according to what they represent.
Now applying the following css:
.date {
position: relative;
float: left;
padding-right: 1em;
font-size: 5em;
}
.month {
transform: rotate(-90deg);
position: absolute;
padding: 3.3em 3em;
}
.year {
position: absolute;
padding-top: 2em;
font-size: 3.2em;
}
The result would be a date with a large date number, a vertical month text and a large year number like so:
2.2 Text Example 1
Just like above, you can use this style of 90degrees rotated text whenever it feels right for you.
–HTML
<h2 class="where">WHERE</h2> <h2 class="are">ARE</h2> <h2 class="you">YOU?</h2>
–CSS
.where {
position: relative;
font-size: 4.5em;
margin: 0;
}
.are {
transform: rotate(-90deg);
position: absolute;
font-size: 2em;
}
.you {
position: absolute;
font-size: 5em;
margin: 0;
padding-left: 0.8em;
The view in the browser would be:
2.3 Text Example 2
Here we see another fancy positioning of text that is rotated in different degrees. Create the markup below:
<h3 class="first">This is the first line on WCG</h3> <h3 class="main">This is the main line on WCG</h3> <h3 class="second">This is the second line on WCG</h3>
Use css to manipulate rotation and positioning:
.first {
transform: rotate(-20deg);
position: relative;
padding: 9em 7em;
}
.second {
position: absolute;
transform: rotate(20deg);
padding: 9em;
}
.main {
position: absolute;
padding: 4.5em 10em;
}
The result would be this:
3. Conclusion
To conclude, we can say that you can use text rotation for several reasons, but do remember that to align it properly with other elements you have to play with positioning and margins. It is not so comfortable to apply quickly somewhere.
However, for those who needs special views on elements (like the date we saw), feel free to test what best fits for you.
4. Download
You can download the full source code of this example here: CSS3 Rotate Text
