Error getting theme layout

2d Transforms are sort of cool, right?

Posted @ 1:52 pm by Grady Kuhnline | Category: Technology | 0 Comments

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 such as skewing and scaling. All the major browser vendors support their own version of the CSS3 spec except IE, though 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):

So, what is this all about? Well, you can transform any element, regardless of its content, using only CSS. 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:

Leave a reply

Error getting theme layout