### Subversion checkout URL

You can clone with HTTPS or Subversion.

# jQuery 2D Transformation Plugin

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({
rotate: 45, //rotates 45 degrees
skew: [10, 10], //skews 10 degrees on the x and y axis
skewX: 10, //skews 10 degrees on the x axis
skewY: 10, //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: [20, 20], //moves the transformation 20px on the x and y axis
translateX: 20, //moves the transformation 20px on the x axis
translateY: 20, //moves the transformation 20px on the y axis
origin: [20, 20]  //changes the transformation origin
});``````

## Animation examples

``````\$('.example').animate({rotate: 45}); //animates the rotation from 0 to 45
\$('.example').animate({
rotate: 45, //rotates 45 degrees
skew: '10 10', //skews 10 degrees on the x and y axis
skewX: 10, //skews 10 degrees on the x axis
skewY: 10, //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: '20 20', //moves the transformation 20px on the x and y axis
translateX: 20, //moves the transformation 20px on the x axis
translateY: 20 //moves the transformation 20px on the y axis
//    origin: [20, 20]  //origin animation isn't supported just yet (for no good reason)
});``````
``````\$('.example').click(function() {
\$(this).animate({rotate: '+=45'});
});``````
Something went wrong with that request. Please try again.