Skip to content

Home

Jump to bottom
heygrady edited this page Nov 29, 2010 · 15 revisions

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