CSS Rotate Text: In-Depth Tutorial on Using CSS Transform to Rotate Text

Hark back to the early days of the World Wide Web when CSS support was non-existent among browsers and you had to create layouts with tables. If you wanted to rotate text on a web page, you had to create actual images and use complicated HTML tables to align them properly.

Not exactly child’s play!

Fortunately, both browsers and CSS have come a long way since then. Rotating text today only requires use of the CSS transform property. As we will learn in this tutorial, not only is this property extremely easy to learn, it is also very flexible and can be used to create a variety of interesting text effects. You can learn more about it and other advanced CSS tricks in this course on CSS animations and transformations.

CSS Transform: The Basics

All text transformation, i.e. skewing, rotating, scaling, etc. in CSS3 is handled by the transform property. Rotating text is only one small feature of this property which enables designers to create complicated text effects in a jiffy.

Let’s look at the basic syntax:

element {
                transform: function;
}

This, however, does not support both webkit based browsers (Safari and Chrome) and Mozilla browsers (Firefox). To include support for these two browsers, you will have to include the following in your CSS transform code:

element {
                transform: function;
                -webkit-transform: function;
                -moz-transform: function;
}

This property supports a number of functions, such as:

Function

What it does

Syntax

Matrix

Transforms the element using a matrix of six values

matrix(n, n, n, n, n, n);

Matrix 3D

3D transformation of an element using a matrix of 16 values

matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n);

Translate

Translates an element in 2D

translate(x, y);

Translate 3D

Translates an element in 3D

translate3d(x, y, z);

Scale

Scales an element in 2D

scale(x, y);

Scale 3D

Scales an element in 3D

scale3d(x, y, z);

Rotate

Rotates an element in 2D

rotate(angle);

Rotate 3D

Rotates an element in 3D

rotate3d(x, y, z, angle);

Skew

Skews an element in 2D

skew(x-angle, y-angle);

Of course, not all these functions would make sense until you actually try them out in practice. While the more advanced functions, such as the 2D and 3D matrix, are beyond the scope of this tutorial, you can see examples of some of the functions below:

Matrix 2D Transformation

matrix2d

2D Translation

2Dtranslation

2D Scaling

2dscaling

2D Rotation

2Drotate

2D Skew

2Dskew 

New to CSS? Learn the basics of CSS and CSS3 in this beginner’s crash course!

Rotating Text with CSS Transform Property

As we saw in the examples above, you can use the rotate function of the transform property to rotate an element. We rotated a box above; let’s see how we can rotate text using the same function:

CSS

p.text-rotation {
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                -moz-transform:rotate(45deg);
}

HTML

<p class=”text-rotation”>All your base <br /> are belong to us</p>

The result:

cssresult

The same text rotated at -45 degrees:

transform: rotate(-45deg);

-45degrees

At -90 degrees:

transform: rotate(-90deg);

-90degrees

 

At -180 degrees:

transform: rotate(-180deg);

-180degrees

Compatibility with Internet Explorer

A big problem with more advanced CSS functions is Internet Explorer. Or more specifically, older versions of Internet Explorer (6, 7 and 8) which do not support a majority of newer CSS3 features. This means you will have to find different workarounds or compromise on your site’s visual design if you want to make your content accessible to everyone.

For example, if you take the above code and try to run it in Internet Explorer 7 or 8 (or God forbid, 6), you’ll likely see the following result:

compatibility

That is, nothing happens.

This is because Internet Explorer 6, 7, or 8 don’t support the transform property. Internet Explorer provides support for most of the transform property functions with the –ms-transform property, though this only works for 2D transformation. Thankfully, you’ll hardly ever need to use 3D transformation, which means you can go ahead and use the transform property to your heart’s content as long as your audience isn’t using IE 6, 7 or 8.

Adding –ms-transform to the above, we see:

p.text-rotation {
                transform: rotate(45deg);
                -webkit- transform: rotate(45deg);
                -moz- transform: rotate(45deg);
                -ms- transform: rotate(45deg);
}

The result, in IE9:

resultIE9

Thus, make sure that you add:

  • -webkit-transform for webkit based browsers (Safari and Chrome)
  • ­-moz-transform for Firefox
  • -ms-transform for IE 9

Can’t understand how layouts work in CSS? Master website layouts with this excellent course on CSS floating layouts.

Example of CSS Rotate Text

You’ll mostly use the CSS rotate text function to create text boxes with sideways headlines. With some clever use of jQuery, you can also create accordion style navigational panels or content boxes. Obviously, like any other CSS property, the transform property can be put to a variety of other uses as well.

For the purpose of this tutorial, however, we’ll look at how you can use CSS rotate text to create a text box with a sideways header. This is rather simple, though it does require some clever use of positioning.

To begin with, this is what we will create:

Example of CSS Rotate Text

The HTML:

<html>
<head>
<title>
CSS Rotate Text</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div class="text-box">
                <div>
                <h1>Headline<h1>
                </div>
                <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
                </div>
</div>

</body>
</html>

The CSS:

body {
                margin:50px;
                font-family:arial;
                }

.text-box {
                width:500px;
                border:4px solid #222;
                height:200px;
}

.headline {
                width:100px;
                float:left;
                height:200px;
                background: #3399FF;
} 

.headline h1 {
                transform: rotate(-90deg);
                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);
                position:relative;
                top:50px;
                left: -13px;
                display:inline-block;
                color:#fff;
                text-transform:lowercase;
}

.content {
                width:380px;
                float:left;
                padding-left:10px;
                height:200px;
                border-left:4px solid #222;
}

Keep in mind that the above will only work with modern browsers (Chrome, Safari, Firefox and IE 9+). Getting this to work with IE8 will require a lot of workarounds with filters which are beyond the scope of this tutorial. Considering that IE8 is still one of the top browsers in the world, it may be worthwhile to include support for older versions of Internet Explorer.

You can learn more about advanced CSS and HTML functions that will help your website look good across all browsers in this in-depth course on CSS and CSS3 for beginners.