How to Tilt or Rotate a SPAN element using CSS

You can tilt or rotate a SPAN or any HTML element at a specified angle using CSS transform property. This property has many useful functions and one of them is the rotate() function, using which you can easily rotate a SPAN element at a given angle, without using any script.

Tilt or Rotate a SPAN element using CSS transform

Let’s see an example.

The CSS and the Markup

<!DOCTYPE html>
<html>
<head>
<title>Tilt SPAN elements using CSS3</title>
<style>
span {
    transform: rotate(70deg);
    -ms-transform: rotate(70deg);	 /*  for IE  */

    /* 	for browsers supporting webkit (such as chrome, firefox, safari etc.). */
    -webkit-transform: rotate(70deg);
    display: inline-block;
}
</style>
</head>

<body>
    <div>
        <div style='padding: 3%;'>
    	    <span>Nav 1</span>
    	    <span>Nav 2</span>
            <span>Nav 3</span>
        </div>
    </div>
</body>
</html>

Try it

Look inside the <style> tag where I have used the transform property. The property has the rotate() function, which has a value 70deg (or 70 degrees). Therefore, it will tilt or rotate every <span> element on my web page to a 70-degree angle.

For "IE" browsers, I have used the -ms-transform property. For browsers supporting -webkit (such as Chrome, Firefox, Safari etc.), I have used -webkit-transform.

transform not working in Chrome or Firefox

Here’s an important point that you must remember, when using the -webkit-transform property on webkit supporting browsers. The -webkit-transform is ignored on inline elements. Although, it’s a very old and known issue, it still exists.

Anyways, no problem. To overcome this issue, you’ll simply have to add display: inline-block; property along with the transform property.

If you have noticed properties inside the <style> tag in the above example, I have use the display property just after -webkit-transform: rotate(70deg);.

/*   for browsers supporting webkit (such as chrome, safari etc.). */
-webkit-transform: rotate(70deg);
display: inline-block;

Rotate and Animate SPAN element

Ok, you have learned how to rotate or tilt a <span> element using only CSS. Now, you can also animate the <span> elements, if you want, and add some cool effects to the elements, without using a JS library or script.

I am extending the above example and I’ll apply some basic animation to the <span> elements to make it look nice.

<!DOCTYPE html>
<html>
<head>
<title>SPAN element Animation using CSS3</title>
<style>
span
{
    transform: rotate(70deg);
    -ms-transform: rotate(70deg);	 /* for IE  */

    /*  for browsers supporting webkit (such as chrome, safari etc.). */
    -webkit-transform: rotate(70deg);
    display: inline-block;
    
    transition: all 1s;
    -o-transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    
    cursor: pointer;
}
span:hover {
    transform: translate(3em,0);
    -o-transform: translate(3em,0);
    -moz-transform: translate(3em,0);
    -ms-transform: translate(3em,0);
    -webkit-transform: translate(3em,0);
}
</style>
</head>

<body>
    <div>
        <div style='padding: 3%;'>
            <span>Nav 1</span>
            <span>Nav 2</span>
            <span>Nav 3</span>
        </div>
    </div>
</body>
</html>

Try it

It just got interesting. What started as a simple tilting function of the SPAN elements, has now transformed into a nice CSS effect.

Like I said in the beginning, the transform property has many useful functions. We have the rotate() function in the first example, now in the second example, I have used translate() function.

See the pseudo :hover property for the span selector inside the <style> element, where I have defined the transform along with the translate() function.

span:hover {
    transform: translate(2em, 0);
    -o-transform: translate(2em, 0);
    -moz-transform: translate(2em, 0);
    -ms-transform: translate(2em, 0);
    -webkit-transform: translate(2em, 0);
}

This alone would not have given me the desired result. Therefore, I have added the transition property to the span selector.

transition: all 1s;
-o-transition: all 1s;
-moz-transition: all 1s;
-webkit-transition: all 1s;

Experiment with different values to get a desired result. For example,

transform: translate(-10px, -20px);
-o-transform: translate(-10px, -20px);
-moz-transform: translate(-10px, -20px);
-ms-transform: translate(-10px, -20px);
-webkit-transform: translate(-10px, -20px);

Browser Compatibility

• Edge - Yes it worked
• IE 10 - Yes it worked
• Firefox 62+ - Yes it worked
• Chrome (any) - Yes it worked
• Opera 56+ - Yes it worked

← PreviousNext →