CSS3 transform: rotateY breaks left half of the flipped layout

Question

Live demo of the problem

I created 6 red blocks, binded a click listener (with a function that alerts the clicked box's id) to all of them, then applied -webkit-transform: rotateY(180deg);. Now the right half of the boxes are alerting the correct id according to the flip, but the boxes on the left half are alerting the original id, not the flipped ones. I tested only on Chrome 31.

Is this the way it should work? How can I make it to display the flipped ids everywhere?

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

It's as if one half of the row is overlapping the other half when rotated. To prevent that, change the transform-origin so that it's at the left and not the middle. This way nothing overlaps when the row is rotated. Then do a traslateX to pull the row back in place.

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

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