CSS3 变换：rotateY 破坏了翻转布局的左半部分

Question

问题的现场演示

我创建了 6 个红色块，将一个点击侦听器（具有提醒被点击框的 id 的功能）绑定到所有这些块，然后应用 -webkit-transform: rotateY(180deg);. 。现在，右半边的盒子根据翻转提醒正确的 id，但左半边的盒子提醒原始 id，而不是翻转后的 id。我只在 Chrome 31 上进行了测试。

这是它应该工作的方式吗？我怎样才能让它在各处显示翻转的 id？

超文本标记语言

<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

旋转时，就好像该行的一半与另一半重叠。为了防止这种情况发生，请更改 transform-origin 这样它就在左边而不是中间。这样，当行旋转时，不会发生重叠。然后做一个 traslateX 将行拉回原位。

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

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