Design, CG Graphics & Inspiration
Cross-browser 2D-Transformations with Animation

Cross-browser 2D-Transformations with Animation

I’ve decided to make a review about an interesting plugin and at the same time give you some recommendations for its use. Plugin is called jQuery 2D Transformation Plugin.
This plug-in allows you to apply 2D transformations in all CSS3 capable browsers as well as Internet Explorer.

Below you can find the description of its properties. Now let’s go back to the plugin itself. After connecting it, we can write things like:

$('.example').click(function() {
    $(this).animate({rotate: '+=45deg'}, 'slow');
});

Thus, when you click on the element it rotates on 45 °. You can specify the number of properties, such as:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5] //  and zoomed it in 1.5
    }, 'slow');
});

Animation chains

The chains of animated transformations give us great opportunities to create some really cool things without using flash. But here we have two problems we can cope with and the third, a small one, which still remains.

First of all, on default jQuery has two types of easing: linear and swing. In most cases, to create beautiful animation chain linear animation is exactly what we need, but if it does not specified, jQuery will use swing. To do this we need to modify the code by adding the parameter «linear»:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5] // // X (width) and Y(height).
    }, 'slow', 'linear');
});

I’m sure that many of you know how to make a chain animation, but I’ll explain anyway. To create animation chain we simply call the new function after describing the properties of the current animation:

$('.example').click(function() {
    var exemple = $(this);
    exemple.animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5]
    }, 'slow', 'linear', function(){
                exemple.animate({
                     rotate: '+=45deg', //I remind you that the entry + = in new jQuery versions means that we add new value to  the current.
                     scale: [1.5, 1.5] 
                });
       });
});

The second problem is that the browsers (except Opera) are terribly slow with the drawing of the object that we transform, if we use translate, translateX or translateY in animation chains. All browsers display the first step normally, but the second and subsequent are entirely unpredictable, right up to the skipping of animation sections.
Here’s what you get (watch it in Chrome or Firefox).

You can overcome this, all you need is to use top, left, bottom or right instead of translates:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg',
       scale: [1.5, 1.5] // // X (width) и Y(height).
       left: '+= 20px',
       top: '+=30px'
    }, 'slow', 'linear');
});

The final result and another example, with a flying block with text inside.

And the third problem is that IE 8.6 draws a black outline on the borders of transparency for transformations of png-images with transparency:
airplan in Cross-browser 2D-Transformations with Animation

There is a rumor that the same thing happens with fonts, and that zoom: 1 repairs fonts. However, I’m not frustrated, because in IE9 everything is all right and a black outline of the old IE even looks stylish:) However, if anyone knows how to fix it, write!

Cool stuff, bro!

And finally, a list of CSS3 transforms’ properties and plugin bonuses:

matrix: [1, 0, 0, 1, 0, 0] – Performs 2D transformation as the transformation matrix of six values.
reflect: true — bonus feature, rotates the element on 180 °
reflectX: true — bonus, reflects it upside down
reflectY: true — bonus, simply reflects downward
rotate: ’45deg’ —rotate
rotate(45deg) in Cross-browser 2D-Transformations with Animation

skewX: ’10deg, skewY: ’10deg’, skew: [’10deg’, ’10deg’] — distortion in degrees. Below you can see how it looks
skewX in Cross-browser 2D-Transformations with Animation

scale: [1.5, 1.5], scaleX: 1.5, scaleY: 1.5 – scaling
scale in Cross-browser 2D-Transformations with Animation

translate: [’20px ‘, ’20px’], translateX: 20px ‘, translateY: ’20px’ – movement. Not recommended, better use left, right, top, bottom. In both cases it looks like this:
translateX in Cross-browser 2D-Transformations with Animation

origin: [‘20% ‘, ‘20%’] – used to determine a starting point for the transformation of the element. For example, when you apply rotate the starting point on default is the center of the element. But for values origin: 0 0 the upper left corner will be the starting point:
transform.png in Cross-browser 2D-Transformations with Animation

For some reason, in comments of the plugin file it is written: – transformOrigin is not accessible. But it should work. May be they simply didn’t realize it at once and then just forgot to remove the comments.

Here you can view some of these properties in action, and get cross-browser code (eg for IE 6.8)(for some reason the site does not work properly in Opera). Just keep in mind that the site does not use IE9 in which these properties are prefixed with-ms-, and replaces it-ms-filter-matrix.

You might also be interested in..

Sprite animation in CSS3
CSS3 Now! Animation, Transparency, and more
Timesaving Tools and Services for Web Developers
CSS3 Now! Transitions

SHARE THIS POST

I'm fond of HTML/CSS-coding

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.