Text Rotation with CSS3

I’m working on a new design for Themes by bavotasan.com and I have been contemplating a few different approaches for some new buttons. This one fell by the wayside but I still think it’s kind of a cool idea. I wanted to use the CSS3 rotate style to have text going straight up. It’s pretty simple to do and looks awesome.

Basic Themes
are
FREE

This is the HTML markup:

Basic Themes
are
FREE

The CSS3 rotate style looks like this:

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

The effects works in Firefox, Safari and Chrome browsers. You can also add a filter to make it work in IE but it probably won’t look exactly how you wanted it to.
The IE filter:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Arrows image by zmajdoo, provided by Pixmac.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie