CSS3 Trasforma: rotazione rompe la metà sinistra del layout capovolto

Question

demo live del problema

Ho creato 6 blocchi rossi, vincolando un listener di click (con una funzione che avvisa l'ID della casella cliccato) a tutti loro, quindi applicato -webkit-transform: rotateY(180deg);.Ora la metà destra delle scatole sta chiedendo l'ID corretto in base al flip, ma le scatole sulla metà sinistra stanno allertando l'ID originale, non i capovolti.Ho testato solo su Chrome 31.

è così come dovrebbe funzionare?Come posso farcela visualizzare gli ID capovolti ovunque?

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

È come se la metà della riga si sovrappone all'altra metà quando viene ruotato.Per evitare che, cambia il transform-origin in modo che sia a sinistra e non al centro.In questo modo nulla si sovrappone quando la riga è ruotata.Quindi eseguire un traslateX per tirare indietro la riga in posizione.

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

.

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