CSS3转换:rotateY打破了翻转布局的左半部分

时间:2013-11-18 11:59:57

标签: html css css3 transform

Live demo of the problem

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

这是应该的吗?如何让它在任何地方显示翻转的id?

Left half alerts wrong ids

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

1 个答案:

答案 0 :(得分:3)

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

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

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