Crossbrowser 2D transformations with animations

Do not be ill. I decided to review the interesting plug-in and at the same time make 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 the animation properties of CSS 2D Transforms .
')
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 turn through 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 here there are two pitfalls that we will overcome, and a third small pebble, which only the coffin will fix.

First, by default, two types of easing are available in the jackpot: linear and incremental. In most cases, to create a beautiful animation chain, we will need linear animations, but, if this is not specified, the jackpot will use the incremental one. To do this, we modify our code a bit 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 will tell. To create a chain of animations, 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 terribly slow with drawing our transformable object if we use translate, translateX or translateY in chains of animations. The first step draws everything normally, but the second and subsequent steps are completely unpredictable, even until the animation links are skipped.
Here's what happens (look in chrome or ff).

You can overcome this attack - 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 lies in the fact that IE 6-8 draws a black outline at the borders of transparency during transformations of png-pictures with transparency:


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

However, this does not upset me very much, everything is fine in IE9 and the black contour in old IE looks even somewhat stylish;)
However, if anyone knows if this can be fixed, write!

Cool stuff, bro!

For a snack, a list of CSS3 transforms properties, as well as bonus features in the plugin:

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

skewX : '10deg, skewY :' 10deg ', skew : [' 10deg ',' 10deg '] is the distortion in degrees. What it looks like is shown below.


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


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


origin : ['20% ', '20%'] - Used when defining a reference point to apply a transformation to an element. For example, if you rotate the default rotate, the center of the element will be the reference point. And for origin values: 0 0, the starting point will be the upper left corner:


For some reason, the comments in the plugin file says:
- transformOrigin is not accessible.
But it should work. Maybe they just didn’t immediately realize 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 features of IE9, in which these properties are available with the prefix -ms-, and feeds it with the -ms-filter-matrix.