The CSS3 transform property
The emerging CSS3 specification defines the functionality for 2d transformations. The most useful of the transformations is the ability to rotate, but there’s some other cool stuff, like skewing and scaling. All the major browser vendors support their own version of the CSS3 spec except IE, however, IE has had support for something similar since version 5.5 (released in 2000). Similar to the @font-face specification, the other browsers are finally catching up to IE. Of course IE’s support is proprietary and lacking some important features.
Using it cross-browser
To use these features, you can simply use CSS. The MDC article on the -moz-transform property is really informative. Here’s a list of the browser-specific CSS properties to use (you can generate them for rotation at CSS3 Please):
- -moz-transform: Firefox 3.5+ (since June 30th, 2009)
- -webkit-transform: Safari 3.1+, Chrome (since March 18, 2008)
- -o-transform: Opera 10.5+ (since March 2, 2010)
- filter: progid:DXImageTransform.Microsoft.Matrix(…) IE 5.5, 6, 7 (since July 2000)
- -ms-filter: “progid:DXImageTransform.Microsoft.Matrix(…)” IE 8
So, what is this all about? Well, you can transform any element using only CSS. Like, any element regardless of it’s content. This should open the doors for designers to do some really interesting things that weren’t possible without using images or Flash before. The best part is that it works in 94% of all current browsers so you can start using it today.
It looks sort of like this:
This is a pink div rotated 45 degrees.
This is a pink div that has been skewed.
You can see some more examples on the demo page.
A jQuery 2d transform plug-in
I’ve written a new jQuery plug-in that allows for transforming and animating elements cross-browser and corrects for the positioning issues that IE has. The tricky bits of using 2d Transformations cross-browser are that IE requires using the matrix function which is overly complicated for the lay-person and IE doesn’t position the transformed element the same way the other browsers do. Fixing IE requires some additional matrix calculations and some relative positioning.
The plug-in is easy enough to use and the animations work the same way all jQuery animations work.
$('.example').transform({rotate: 45}); // rotates 45deg
$('.example').animate({rotate: 45}); // animates 45deg// let's freak out our boss and skew *everything*
$('*').mouseenter(function() {
 var $el = $(this);
 $el.animate({skewX: 25}, {complete: function(){
 $el.animate({skewX: -25}, {complete: function(){
 $el.animate({skewX: 0});
 }});
 }});
});
All you need is jQuery and the transform plug-in to be cool.
Some links:
- Demo page
- jQuery 2d Transform Plug-in
- Github Repo
- Correcting Transform Origin and Translate in IE
- Calculating 2d Matrices