Cross Browser Text and Image Rotation using CSS and Javascript

Cross Browser Text and Image Rotation using CSS and Javascript

Hey folks, hope you all have been doing great; in-fact awesome! Today we are going to share a browser compatible element rotate code snippet that you all could use in your designs. We made a part of this article referring to Snook’s and CSS-Tricks Snippets

Cross Browser Text and Image Rotation using CSS and Javascript

Compatibility is a hypothetical word when we say it along IE” – bCreatives

Lets see what we can do to make it as real as possible. First up, lets see what the latest in technology has to offer us. Lets say we have a div with an id that we wish to rotate in a webpage.

<div id="element">
Hello
</div>

Below is the snippet that will rotate the div and all of its contents -5 degrees in all modern browsers.

#element{
/*firefox*/
-moz-transform:rotate(-5deg);
/*generic*/
transform:rotate(-5deg);
/*safari, chrome etc*/
-webkit-transform:rotate(-5deg);
/*ie8+*/
-ms-transform:rotate(-5deg);
/*opera*/
-o-transform: rotate(-5deg);
}

You may also want to checkout other CSS3 Transformations for modern browsers.

Now lets talk unreal :p. What do to when it comes to IE6?

It can be partially achieved by the BasicImage Filter for Internet Explorer. BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

/*ie6 */
#element{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/* just so it renders properly in-case of ie6 */
z-index:inherit;
zoom:1;

If you really want to rotate an image to a specific -5degrees, you can checkout the Matrix Filter which is thoroughly explained here at boogdesign. It goes like this below

/*ie6 */
#element{
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678,sizingMethod='auto expand');
}
/* just so it renders properly in-case of ie6 */
z-index:inherit;
zoom:1;

Thanks Jeroen (from the comments) for a link to the Matrix Coordinates Calculator and the sizingMethod parameter above.

Now there is a Javascript Library that can easily help you out without making those calculations. Its called the CSS Sandpaper Library. It comes with other compatible transformations too.

In-case you think CSS Sandpaper is too much to add to your page, try the jQuery Image Rotate Script. This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Main focus is to unify this behavior across different browsers.

There is yet another transform solution available – the .htc file. Yes this is the one like what we used sometimes for the PNGFix although for this transform fix – download the -ms-transform.htc file.

/*for ie6 and 7*/
behavior:url(-ms-transform.htc);
/* just so it renders properly in-case of ie6 */
z-index:inherit;
zoom:1;

There are other scripts on the Internet that give compatible transformations but they come with their risks – one we know is called Transformie.

A more canvas based approach could be taken through the BugSoftware’s Image Rotate Script, this can be applied to both Static and Dynamic Elements. And hey also lets not forget our old Browser Compatible Raphael JS Script, it uses the SVG W3C Recommendation and VML as a base for creating graphics like Image Rotation. We used Raphael in our latest Dera Web Project too, it has its restrictions but is simply awesome – see it live at http://www.dera.com.au/.

Finally, an example CSS Code Snippet that you can implement to Rotate an Element 90 Degrees in almost all major browsers used world wide is (yes this includes IE6).

#element{
-moz-transform:rotate(90deg);
transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
z-index:inherit;
zoom:1;
}

Just incase you want an arbitrary angle to work for IE6, use the .htc method suggested above along side in the separate ie6.css file.

Moral of the story? Let’s be real – IE6 is dying out and lets not waste time getting things to work on it unless they are really really really required; as for else there are tweaks presented above that can help you get things done.

Filed under: Blog, CSS, Javascript, Web Design

Comments are closed.