Transformation CSS3 :rotateY casse la moitié gauche de la mise en page inversée

Question

Démo en direct du problème

J'ai créé 6 blocs rouges, lié un écouteur de clics (avec une fonction qui alerte l'identifiant de la boîte cliquée) à chacun d'eux, puis appliqué -webkit-transform: rotateY(180deg);.Maintenant, la moitié droite des cases alerte l'identifiant correct en fonction du retournement, mais les cases de la moitié gauche alertent l'identifiant d'origine, pas celles inversées.J'ai testé uniquement sur Chrome 31.

Est-ce ainsi que cela devrait fonctionner ?Comment puis-je faire en sorte que les identifiants inversés soient affichés partout ?

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

C'est comme si une moitié de la rangée chevauchait l'autre moitié lors de la rotation.Pour éviter cela, modifiez le transform-origin pour qu'il soit à gauche et non au milieu.De cette façon, rien ne se chevauche lors de la rotation de la ligne.Puis faites un traslateX pour remettre la rangée en place.

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

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