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

jquery JSON php

php javascript jquery json

while ($row = mysql_fetch_object($result)) {

How to confirm Android Share Intent is successful or complete

android facebook android-intent share android-sharing

Is there a way to confirm if a Share intent in Android was successful or unsuccessful? (For example, if I share a Facebook post, I'd like to know if it was successfully posted or know if it was can...