jQuery UI Sortable 3D CSS

Using 3D CSS properties on the jQuery UI sortable widget.

HTML

<ul class="ui-widget">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

CSS

body {
    margin: 2em;
    font-size: 0.8em;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

ul li.ui-state-default {
    margin: 0 3px 3px 3px;
    padding: 0.4em;
    padding-left: 1.5em;
    transition: -webkit-transform ease-out 0.3s;
    -webkit-transform-origin: 50% 50%;
    background-image: none;
}

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

ul li span {
    position: absolute;
    margin-left: -1.3em;
}

JavaScript

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