Skip to content

Home

Jump to bottom
heygrady edited this page Sep 14, 2010 · 15 revisions

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'});
});
Clone this wiki locally