CSS3 변환:RotateY는 뒤집힌 레이아웃의 왼쪽 절반을 나눕니다.

Question

문제의 라이브 데모

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

자바스크립트/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/