Cross-browser 2D transformations with animations

Do not be ill. I decided to review an interesting plugin and at the same time give recommendations for use.

For the most impatient - it will turn out like this .

The plugin is called jQuery 2D Transformation Plugin . It allows you to use CSS animation of 2D Transforms properties .

Overview with a description of the properties - at the end of the topic.

Now back to the plugin itself. After connecting it, we can write such things:

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

Thus, by clicking on the element, it will rotate 45 °. You can set a number of properties, for example:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg', //Повернули
       scale: [1.5, 1.5] // и при этом увеличили в 1.5 раза
    }, 'slow');
});

Animation Chains

Chains of animated transformations open up great opportunities for us to do cool things without a flash. But there are two pitfalls that we will overcome, and a third small pebble that only the coffin will correct.

Firstly, by default, two types of easing are available in jackver: linear and incremental. In most cases, to create a beautiful chain of animations, we will need linear animations, but if you do not specify this, the jquery will use incremental ones. To do this, we slightly modify our code by adding the “linear” parameter:

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg', //Повернули
       scale: [1.5, 1.5] // // X (ширина) и Y(высота).
    }, 'slow', 'linear');
});

Surely many people know how to make a chain of animation, but just in case I’ll tell you. To create an animation chain, we simply call a 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', //Напоминаю, что запись вида += в новых версиях джеквери означает, что к текущему значению прибавляем новое.
                     scale: [1.5, 1.5] 
                });
       });
});

The second pitfall is that browsers (except opera) are frighteningly slowing down when rendering our transformable object if we use translate, translateX or translateY in animation chains. Everyone draws the first step normally, but the second and subsequent ones are completely unpredictable, right up to skipping links in the animation.
Here's what happens (look in chrome or ff).

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

$('.example').click(function() {
    $(this).animate({
       rotate: '+=45deg', //Повернули
       scale: [1.5, 1.5] // // X (ширина) и Y(высота).
       left: '+= 20px',
       top: '+=30px'
    }, 'slow', 'linear');
});

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

The third underwater pebble is that IE 6-8, when transforming PNG images with transparency, draws a black outline at the borders of transparency:


They say that it’s the same garbage with fonts, and they also say that zoom: 1 treats fonts.

However, this is not very upsetting for me, everything is fine in IE9 and the black outline in old IEs looks even a bit stylish;)
Nevertheless, if anyone knows if this can be fixed, write!

Cool stuff, bro!

For starters, a list of CSS3 transforms properties, as well as bonus ones that are in the plugin:

matrix : [1, 0, 0, 1, 0, 0] - Carries out a 2D transformation in the form of a transformation matrix of six values. Smoking is difficult enough
reflect : true - bonus property, rotates the element 180 °
reflectX : true - bonus, reflects upside down
reflectXY : true - bonus. Same as reflectX + rotate (-90deg)
reflectY : true - bonus, just reflects down
rotate: '45deg' - turn, it turns in Africa

too : skewX : '10deg, skewY :' 10deg ', skew : [' 10deg ',' 10deg '] - distortion in degrees. What does it look like


scale : [1.5, 1.5], scaleX : 1.5, scaleY : 1.5 - scaling:


translate : ['20px', '20px'], translateX : 20px ', translateY :' 20px '- movement. I do not recommend using, better left , right , top , bottom . In both cases it turns out like this:


origin : ['20% ', '20%'] - Used to determine the reference point for applying the transformation to the element. For example, when you rotate rotate by default, the starting point will be the center of the element. And with values ​​of origin: 0 0, the reference point will be the upper left corner:


For some reason, in the comments in the plugin file it says:
- transformOrigin is not accessible.
But it should work. Perhaps they just did not immediately realize it and forgot to delete the comment.

You can see some of these properties in action, as well as get a cross-browser code (including for IE 6-8) here (for some reason, the site does not work well in Opera). Just keep in mind that the site does not use the capabilities of IE9, in which these properties are available with the -ms- prefix, but feeds it the -ms-filter-matrix.