# jQuery 2D Transformation Plugin

jQuery 1.4.2 is the minimum for this plugin to function correctly.

This plug-in allows you to apply 2D transformations in all CSS3 capable browsers as well as Internet Explorer. This plug-in works in Firefox 3.5+, Safari 3.1+, Chrome, Opera 10.5+ and IE 5.5+. It adds additional support in IE for `transform-origin` and `translate()` by using relative positioning. Because IE only supports `matrix()`, the Sylvester library is used to calculate the matrices automatically.

## How this works

In non-IE browsers, there isn’t much magic going if you’re just transforming an object using one of the defined 2d transformation functions. For all browsers, using the `matrix()` function will rely on Sylvester to calculate the appropriate matrix values. Matrices are pretty confusing for those who aren’t math majors. The matrix examples in the SVG spec clearly explain how this works under the hood.

## Transform examples

``````\$('.example').transform({rotate: 45}); //rotates the elements 45 degrees
\$('.example').transform({
matrix: [1, 0, 0, 1], //applies a matrix
reflect: true, //same as rotate(180deg)
reflectX: true, //mirrored upside down
reflectXY: true, //same as reflectX + rotate(-90deg)
reflectY: true, //mirrored
rotate: '45deg', //rotates 45 degrees
skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
skewX: '10deg', //skews 10 degrees on the x axis
skewY: '10deg', //skews 10 degrees on the y axis
scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
scaleX: 1.5, //scales by 1.5 on the x axis
scaleY: 1.5, //scales by 1.5 on the y axis
translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
translateX: '20px', //moves the transformation 20px on the x axis
translateY: '20px', //moves the transformation 20px on the y axis
origin: ['20px', '20px']  //changes the transformation origin
}, {
forceMatrix: true, //default: false. uses a matrix in all browsers, not just IE
preserve: true //keeps the previous transform settings
});``````

## Animation examples

``````\$('.example').animate({rotate: 45}); //animates the rotation from 0 to 45
\$('.example').animate({
matrix: [1, 0, 0, 1], //applies a matrix
reflect: true, //same as rotate(180deg)
reflectX: true, //mirrored upside down
reflectXY: true, //same as reflectX + rotate(-90deg)
reflectY: true, //mirrored
rotate: '45deg', //rotates 45 degrees
skew: ['10deg', '10deg'], //skews 10 degrees on the x and y axis
skewX: '10deg', //skews 10 degrees on the x axis
skewY: '10deg', //skews 10 degrees on the y axis
scale: [1.5, 1.5], //scales by 1.5 on the x and y axis
scaleX: 1.5, //scales by 1.5 on the x axis
scaleY: 1.5, //scales by 1.5 on the y axis
translate: ['20px', '20px'], //moves the transformation 20px on the x and y axis
translateX: '20px', //moves the transformation 20px on the x axis
translateY: '20px'//moves the transformation 20px on the y axis
origin: ['20px', '20px']  //animates the origin
});``````
``````\$('.example').click(function() {
\$(this).animate({rotate: '+=45deg'});
});``````
##### Clone this wiki locally
You can’t perform that action at this time.
Press h to open a hovercard with more details.