jquery.transform.js

Basic usage

• $(elem).animate({
    transform: 'translateX(50px)'
  });

• $(elem).animate({
    transform: 'rotate(135deg)'
  });

• $(elem).animate({
    transform: 'scale(2,.5)'
  });

• $(elem).animate({
    transform: 'skewX(35deg) skewY(15deg)'
  });

Advanced usage

// Combine transform components to create isometric 3d transform.
var transforms = [
    'skewY(-45deg) scale(.66)',
    'translate(20px) skewY(-45deg) scale(.66)',
    'translate(150px,50px) scale(1.5,1)',
    'translate(280px) skewY(45deg) scale(.66)',
    'translate(300px) skewY(45deg) scale(.66)'
  ],
  $squares = $('.square').each(function(i) {
    $(this).css({ transform: transforms[i] });
  });
$('#cover').mouseenter(function() {
  $squares.each(function(i) {
    $(this).animate({ transform: transforms[i+1] });
  });
}).mouseleave(function() {
  $squares.each(function(i) {
    $(this).animate({ transform: transforms[i] });
  });
});