Transformação CSS3:rotateY quebra a metade esquerda do layout invertido

Question

Demonstração ao vivo do problema

Criei 6 blocos vermelhos, vinculei um click listener (com uma função que alerta o id da caixa clicada) a todos eles e apliquei -webkit-transform: rotateY(180deg);.Agora a metade direita das caixas está alertando o id correto de acordo com a virada, mas as caixas da metade esquerda estão alertando o id original, e não os invertidos.Testei apenas no Chrome 31.

É assim que deveria funcionar?Como posso exibir os IDs invertidos em todos os lugares?

HTML

<table>
    <tr>
        <td id="t1">t1</td>
        <td id="t2">t2</td>
        <td id="t3">t3</td>
        <td id="t4">t4</td>
        <td id="t5">t5</td>
        <td id="t6">t6</td>
    </tr>
</table>

CSS

tr {
    -webkit-transform: rotateY(180deg);
}

td {
    background-color: red;
    height: 50px;
    width: 50px;
    text-align: center;
}

JavaScript/jQuery

$(document).ready(function(){
    $('td').click(function(){
        alert($(this).attr('id'));
    });
});

Answer 1

É como se metade da linha se sobrepusesse à outra metade quando girada.Para evitar isso, altere o transform-origin para que fique à esquerda e não no meio.Dessa forma, nada se sobrepõe quando a linha é girada.Então faça um traslateX para puxar a linha de volta no lugar.

tr {
    -webkit-transform-origin: center left;
    -webkit-transform: rotateY(180deg) translateX(-100%);
}

http://jsfiddle.net/3BSyw/2/