CSS3 변환:RotateY는 뒤집힌 레이아웃의 왼쪽 절반을 나눕니다.
문제
문제의 라이브 데모
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'));
});
});
해결책
회전할 때 행의 절반이 나머지 절반과 겹치는 것과 같습니다.이를 방지하려면 transform-origin
중앙이 아닌 왼쪽에 있도록 말이죠.이렇게 하면 행이 회전될 때 아무 것도 겹치지 않습니다.그런 다음 traslateX
행을 제자리로 다시 당깁니다.
tr {
-webkit-transform-origin: center left;
-webkit-transform: rotateY(180deg) translateX(-100%);
}
제휴하지 않습니다 StackOverflow