【问题标题】：CSS3 transform: rotateY breaks left half of the flipped layoutCSS3 变换：rotateY 打破翻转布局的左半部分
【发布时间】：2013-11-18 11:59:56
【问题描述】：

Live demo of the problem

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

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

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

【问题讨论】：

标签： html css transform

【解决方案1】：

就好像行的一半在旋转时与另一半重叠。为防止这种情况发生，请更改transform-origin，使其位于左侧而不是中间。这样，当行旋转时，没有任何重叠。然后执行traslateX 将行拉回原位。

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

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

【讨论】：