Home

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

• Mozilla
• WebKit
• Opera
• Internet Explorer
• W3C
• SVG’s Example of how 2D matrices work

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.