CSS3変換：Rotateyはフリップされたレイアウトの半分の半分を破る

Question

real="nofollow noreferrer">問題のライブデモ

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

.

Answer 1

回転したときに他の半分の半分が重なっているかのようです。それを防ぐために、それが左にあるようにtransform-originを変更してください。このように、行が回転したときには何も重ならない。次に、列車を所定の位置に戻すためにtraslateXを実行します。

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

.

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