Rotate element with CSS3 and some tricks

CSS3 rotate transformI see many people are playing around the net with the new CSS3 features. The biggest problem is that some features are still not very well or at all adopted by some browsers. Since Microsoft had officially announced the IE6 countdown and it’s forthcoming death, designer and developers worldwide can relieve. But anyway in the following small tip I’ll show you how to rotate text or element in all browsers including your “beloved” IE6 🙂 We will use the transform property of CSS3 and for value we add “rotate” with required degrees.

For IE we can use a “filter” property with “BasicImage” value. It receives 4 parameters: 0, 1, 2, 3 which will rotate our element accordingly to 0, 90, 180, 270 degrees.

The code will work in Firefox, Opera, Chrome, Safari, IE6-9 and shouldn’t have any problems with mobile devices but hasn’t been tested.

Here is the CSS style to rotate a div element:
[cc escaped=”true” lang=”css”]div {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
[/cc]

Example

Rotate me!
It's only fair to share...Buffer this pageShare on Facebook0Tweet about this on TwitterShare on Google+0Share on LinkedIn0Share on Reddit0Pin on Pinterest0Email this to someone
About

Just a guy with strong interest in PHP and Web technologies

Tagged with: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*