CSS3 변형 복합 회전 예기치 않은 동작

div가 원근감있게 보였고 변환이 rotateY(-90deg) rotateX(-180deg) 인 경우 앞에있는 rotateZ(-90deg)은 -90도 회전을 제공하지 않고 +270도 회전을 제공합니다.CSS3 변형 복합 회전 예기치 않은 동작

사업부의 스타일이 동작은 당신이 패션에 세 개의 회전을 체인 때 rotate(90deg) rotate(90deg) rotate(90deg) 결과가 사실에 관련이 있는지 잘 모르겠어요
transform: rotateZ(-90deg) rotateY(-90deg) rotateX(-180deg);

에
transform: rotateY(-90deg) rotateX(-180deg);
에서 간다 + 270도 회전이 아니라 -90도 회전입니다.

이 버그가 여기 http://jsfiddle.net/Sdg2W/1/

jsFiddle를 참조하십시오? 모든 통찰력은 인정 될 것이다.

출처

2013-07-18 Daniel W

어? 나는 "+270"또는 "-90"의 회전이 어떻게 구별 될 수 있는지에 대해서 조금 길다. –

@Damien_The_Unbeliever - 차이점은 하나는 시계 방향으로 회전하고 다른 하나는 시계 반대 방향으로 회전한다는 것입니다. 그것은 최종 포지션에서 차이를 만들지는 않지만, 그 포지션에 도달하는 데 차이를 만듭니다. – Shauna

이며, 다음 회전이 반전되어 있다고 생각 Mac의 Chrome에서 발생하는 버그입니다.

출처

2013-07-21 12:16:56

제가 말할 수있는 한, 괜찮습니다. 시계 방향으로 회전하고 반대 방향으로 시계 반대 방향으로 회전하면됩니다. 그러나 +270으로 회전 할 때 전체 회전의 3/4을 회전한다는 사실을 놓치게됩니다. 귀하의 바이올린은 1/4 회전 만합니다.

다른 피들보기 : [http://jsfiddle.net/vals/Sdg2W/2/]. 나는 변형을하는 길만 바꿔서 더 쉽게 그걸 가지고 놀 수 있습니다.

나는 무엇을 혼란하면 Y 축에서 180도 있기 때문에 (즉 인 경우에만 변환 당신이 무엇을 기대에서) 이것은 참으로

출처

2013-07-18 18:54:28 vals

답변 해 주셔서 감사합니다. 이것이 참으로 버그 인 것 같습니다. 내 피들은 1/4 회전 만한다고했지만, Mac의 경우 Chrome의 경우 3/4입니다. 당신이 말했던 것처럼 사파리 (Safari)를 확인해 보았습니다. 이것은 내가 예상했던 행동 (방향과 크기)입니다. 잘하면 Chrome 개발자가이 문제를 해결할 것입니다. –

PC의 Chrome에서 정상적으로 작동하므로 수정하기가 어려워 야합니다. – vals

CSS3 변형 복합 회전 예기치 않은 동작

답변

관련 문제