jQuery UI: Sortable 3D CSS

The jQuery UI sortable widget allows the user to pick an item up, and drop it in another location. It's kinda like the draggable widget and in fact, uses the draggable widget to implement the draggable behaviour. A key difference, however, is that sortable will shuffle the other items around as the item is dragged, and after it's dropped. It re-sorts the items. The only style changes applied to the item that's being moved is it's position. We can use some fancy 3D CSS to make the item stand out even more when it's being dragged.

You can see that once you start dragging an item, it grows in size, which helps it stand out as the item that's currently being sorted. Once dropped, it shrinks back to it's normal size. And it uses CSS transitions for smooth growing and shrinking. Here's the example, and here's the event handlers used to add and remove our grow class from the item.

$( 'ul' ).sortable({
    start: function( e, ui ) {
        ui.helper.addClass( 'grow' )
    },
    stop: function( e, ui ) {
        setTimeout( function() {
            ui.item.removeClass( 'grow' );
        }, 1 );
    }
});

Note the setTimeout() call in the stop handler. I think the item isn't actually part of the DOM when this event is triggered. Without it, the transition doesn't work as expected. Here's what the CSS looks like.

ul li {
    transition: -webkit-transform ease-out 0.3s;
    -webkit-transform-origin: 50% 50%;
}

ul li.grow {
    -webkit-transform: perspective(800px) translateZ(90px);
}