CSS3 transform: rotateY breaks left half of the flipped layout

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'));
    });
});

Answers


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/


Need Your Help

AS3 forlooping buttons and functions

actionscript-3 for-loop

I'm learning Actionscript and I'm kind of stuck on for loop.

connect lines from Canny algorithm

android image image-processing opencv

I get edges from canny algorithm, but between lines are little spaces. I need to connect lines together and reduce this space.