Tile flip

HTML

<div class="floatright">
    <button class="demobutton" id="tlbr_domino">Top-left bottom-right flip</button>
    <button class="demobutton" id="tlbr_undomino">Top-left bottom-right un-flip</button>
    <br/>
    <button class="demobutton" id="bltr_domino">Bottom-left top-right flip</button>
    <button class="demobutton" id="bltr_undomino">Bottm-left top-right un-flip</button>
    <br/>
    <button class="demobutton" id="lr_domino">Left-right flip</button>
    <button class="demobutton" id="lr_undomino">Left-right un-flip</button>
    <br/>
    <button class="demobutton" id="rl_domino">Right-left flip</button>
    <button class="demobutton" id="rl_undomino">Right-left un-flip</button>
    <br/>
    <button class="demobutton" id="tb_domino">Top-bottom flip</button>
    <button class="demobutton" id="tb_undomino">Top-bottom un-flip</button>
    <br/>
    <button class="demobutton" id="bt_domino">Top-bottom flip</button>
    <button class="demobutton" id="bt_undomino">Top-bottom un-flip</button>
    <br/>
</div>
<div class="flipcontainer">
    <div class="fliptile">
        <div class="flipfacef">Front 00</div>
        <div class="flipfaceb">Back 00</div>
    </div>
    <div class="fliptile">
        <div class="flipfacef">Front 01</div>
        <div class="flipfaceb">Back 01</div>
    </div>
    <div class="fliptile">
        <div class="flipfacef">Front 02</div>
        <div class="flipfaceb">Back 02</div>
    </div>
    <div class="fliptile">
        <div class="flipfacef">Front 03</div>
        <!-- -->
        <div class="flipfaceb">Back 03</div>
    </div>
    <br/>
    <div class="fliptile">
        <div class="flipfacef">Front 10</div>
        <div class="flipfaceb">Back 10</div>
    </div>
    <div class="fliptile">
        <div class="flipfacef">Front 11</div>
        <div class="flipfaceb">Back 11</div>
    </div>
    <div class="fliptile">
        <div class="flipfacef">Front 12</div>
        <div class="flipfaceb">Back 12</div>
    </div>
    <div...

CSS

button {
    min-width: 192px;
}
.floatright {
    float: right;
}
.flipcontainer {
    white-space: nowrap;
    perspective: 1000;
    margin: none;
    padding: none;
}
.fliptile {
    position: relative;
    display:inline-block;
    width: 64px;
    height: 64px;
    transition: all 0.5s linear;
    -webkit-transition: all 0.5s linear;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.flipfacef, .flipfaceb {
    position: absolute;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}
.flipfacef {
}
.flipfaceb {
    width: 64px;
    height: 64px;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    background-color: grey;
}

JavaScript

$(function () {
    var tiles;
    
    var demo_lookup = {
        tlbr: { x:1, y:1 },
        bltr: { x:1, y:-1 },
        lr: { x:1, y:0 },
        rl: { x:-1, y:0 },
        tb: { x:0, y:1 },
        bt: { x:0, y:-1 },
        bt: { x:0, y:-1 },
        domino: '180deg',
        undomino: '0deg'
    };

    var test_placeholders = function () {
        $('.flipfacef').each(function () {
            var item = $(this);
            var text = item.text();
            var imgsrc = 'http://placehold.it/64/CCC/000&text=' + encodeURI(text);
            item.empty().append($('<img>').attr('src', imgsrc));
        });
    };
    test_placeholders();

    tiles = $('.flipcontainer').children('.fliptile');

    var flip_tile_callback = function (item, style) {
        return function () {
            $(item).css(style);
        };
    };

    var domino_flip = function (items, amount, vector, completeTime) {
        // Compute delays using the passed vector
        var delays = [];
        var max_delay = 0;
        for (var i = 0; i < items.length; ++i) {
            var pos = $(items[i]).offset();
            var delay = pos.left * vector.x + pos.top * vector.y;
            delays.push(delay);
            if (max_delay < delay) {
                max_delay = delay;
            }
        }

        // Normalize delays
        for (var i = 0; i < items.length; ++i) {
            delays[i] /= max_delay;
        }

        for (var i = 0; i < items.length; ++i) {
            setTimeout(flip_tile_callback(items[i], {
                'transform': 'rotateY(' + amount + ')',
                    '-ms-transform': 'rotateY(' + amount + ')',
                    '-webkit-transform': 'rotateY(' + amount + ')',
            }),
            delays[i] * completeTime + 1);
        }
    };

    $('#domino').on('click', function () {
        domino_flip(tiles, '180deg', {
            x: -1,
            y: 1
        }, 750);
    });

    $('.demobutton').on('click', function() {
       ...