jQuery Transit is a plugin that assists with CSS transformations and transitions in jQuery
Usage
Just include jquery.transit.js after jQuery. Requires jQuery 1.4+.
<script src='jquery.js'></script>
<script src='jquery.transit.js'></script>Transformations
In jQuery, transformations can be set like any other CSS property. However, keep in mind that they can only be set, not animated with $.fn.animate().
$("#box").css({ x: '30px' }); // Move right
$("#box").css({ y: '60px' }); // Move down
$("#box").css({ translate: [60,30] }); // Move right and down
$("#box").css({ rotate: '30deg' }); // Rotate clockwise
$("#box").css({ scale: 2 }); // Scale up 2x (200%)
$("#box").css({ scale: [2, 1.5] }); // Scale horiz and vertical
$("#box").css({ skewX: '30deg' }); // Skew horizontally
$("#box").css({ skewY: '30deg' }); // Skew vertical
$("#box").css({ perspective: 100, rotateX: 30 }); // Webkit 3d rotation
$("#box").css({ rotateY: 30 });
$("#box").css({ rotate3d: [1, 1, 0, 45] });Animating – $.fn.transition
$('...').transition(options, [duration], [easing], [complete])You can animate with CSS3 transitions using $.fn.transition(). It works exactly like $.fn.animate(), except it uses CSS3 transitions.
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // duration
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'fast'); // easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in'); // duration+easing
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function() {..}); // callback
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'in', function() {..}); // everything
