Trasformazioni "smooth" con jQuery e CSS3

Translate X

$('.box').transition({ x: '90px' });

Translate Y

$('.box').transition({ y: '30px' });

Translate X and Y

$('.box').transition({ x: '200px', y: '20px' });

Rotate

$('.box').transition({ rotate: '30deg' });

Skew X

$('.box').transition({ skewX: '30deg' });

Skew Y

$('.box').transition({ skewY: '30deg' });

Skew X and Y

$('.box').transition({
    skewX: '30deg',
    skewY: '-30deg'
});

Scale up 120% size

$('.box').transition({ scale: 1.2 });

Scale 200% horizontally, 150% vertically

$('.box').transition({ scale: [2, 1.5] });

Rotate X

$('.box').transition({
    perspective: '100px',
    rotateX: '180deg'
});

Rotate Y

$('.box').transition({
    perspective: '100px',
    rotateY: '180deg'
});

Rotate 3D

$('.box').transition({
    perspective: '100px',
    rotate3d: '1, 1, 0, 180deg'
});

$.fn.transition for any CSS property

$('.box').transition({
    opacity: 0,
    scale: 1.6
});

$('.box').transition({
    marginLeft: '20px',
    height: '80px'
});

Providing callbacks

$('.box').transition({ x: -100 }, function() {
    $(this).transition({ opacity: 0 });
});

Custom duration (jQuery style)

$('.box').transition({ opacity: 0 }, 'slow');

Custom duration (in milliseconds)

$('.box').transition({ opacity: 0 }, 2000);

Delay by 400ms

$('.box').transition({ x: -100, delay: 400 });