CSS

CSS Rotate Text Example

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:

Basic Text-Rotation Applied
Basic Text-Rotation Applied

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:

A Date Example of Text Rotation
A Date Example of Text Rotation

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:

Text Example of Rotation
Text Example of Rotation

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:

Text Example 2 of Text Rotation
Text Example 2 of Text Rotation

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

Fabio Cimo

Fabio is a passionate student in web tehnologies including front-end (HTML/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button