Cannot scale to (0, 0) a <div> that has been transform: translate();

I’m building a jQuery sorting plugin like MixItUp and I’ve come across a problem that is messing with the entire script.

In short: I need to be able to transform: scale(0, 0); a <div> that has been previously transform: translate(Xpx, Ypx); but the <div> keeps going back before hiding immediately.

I’ve narrowed it down to a JSFiddle that easily reproduces the problem.

jQuery:

jQuery(function($) {

    var applyTransform = function($box, value) {
        $box.css({
            '-webkit-transform': value,
            '-moz-transform': value,
            '-o-transform': value,
            '-ms-transform': value,
            'transform': value
        });        
    };

    $('button').on('click', function(e) {
        e.preventDefault();
        var boxId = $(this).data('box')
            , action = $(this).data('action')
            , value
        ;

        switch(action) {
            case 'translate':
                value = 'translate(200px, 100px)';
                break;
            case 'show':
                value = 'scale(1, 1)';
                break;
            case 'hide':
                value = 'scale(0, 0)';
                break;           
        }

        applyTransform($('#box-' + boxId), value);

    });
});

HTML:

<div class="box" id="box-0">0</div>
<div class="box" id="box-1">1</div>
<div class="box" id="box-2">2</div>
<hr/>
<button data-action="translate" data-box="1">translate</button>
<button data-action="show" data-box="1">show</button>
<button data-action="hide" data-box="1">hide</button>

CSS:

.box {
    width: 150px;
    height: 150px;
    margin: 10px;
    display: inline-block;
    border: 1px solid red;
    text-align: center;
    font-size: 3em;

    -webkit-transition: all 1500ms ease;
    -moz-transition: all 1500ms ease;
    -ms-transition: all 1500ms ease;
    -o-transition: all 1500ms ease;
    transition: all 1500ms ease;
}

You need to follow these steps:

1. Click hide: the <div>’s scale goes to 0
2. Click show: the <div> takes its initial scale
3. Click translate: the <div> moves away
4. Click hide: instead of hiding, the <div> takes its initial position and, wait for it, hides instantly.

I ensured that no external library, apart from jQuery, is loaded.

This is one of my first times playing with transform CSS property and I may have been missing something obvious but my research didn’t show anything up related.

As per @Xufox's comment, I need to set both values at once, like so:

transform: translate(200px, 100px) scale(0,0);