CSS3-Transformation:Rotierend bricht die linke Hälfte des gespiegelten Layouts ab

Question

Live-Demo des Problems

Ich habe 6 rote Blöcke erstellt, einen Klick-Listener (mit einer Funktion, die die ID des angeklickten Felds benachrichtigt) an alle gebunden und dann angewendet -webkit-transform: rotateY(180deg);.Jetzt gibt die rechte Hälfte der Kästchen die richtige ID entsprechend dem Umdrehen aus, aber die Kästchen in der linken Hälfte geben die ursprüngliche ID an, nicht die umgedrehten.Ich habe nur auf Chrome 31 getestet.

Sollte es so funktionieren?Wie kann ich dafür sorgen, dass die umgedrehten IDs überall angezeigt werden?

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 ist, als ob eine Hälfte der Reihe die andere Hälfte überlappt, wenn sie gedreht wird.Um dies zu verhindern, ändern Sie die transform-origin damit es links ist und nicht in der Mitte.Auf diese Weise überlappt sich nichts, wenn die Zeile gedreht wird.Dann mach einen traslateX um die Reihe wieder an ihren Platz zu ziehen.

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

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