Transformación CSS3:rotarY rompe la mitad izquierda del diseño invertido

Question

Demostración en vivo del problema.

Creé 6 bloques rojos, vinculé un detector de clics (con una función que alerta la identificación del cuadro en el que se hizo clic) a todos ellos y luego los apliqué. -webkit-transform: rotateY(180deg);.Ahora la mitad derecha de los cuadros alerta la identificación correcta según el giro, pero los cuadros de la mitad izquierda alertan la identificación original, no los volteados.Probé solo en Chrome 31.

¿Es así como debería funcionar?¿Cómo puedo hacer para que se muestren los identificadores invertidos en todas partes?

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

Es como si la mitad de la fila se superpusiera a la otra mitad cuando se gira.Para evitarlo, cambie el transform-origin para que quede a la izquierda y no al medio.De esta manera nada se superpone cuando se gira la fila.Entonces haz un traslateX para volver a colocar la fila en su lugar.

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

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