이전 3D 변환 축 회전의 이해 (3D Coordinate System) 포스팅에서 3D좌표계를 기준으로 한 회전 방향을 알아보았는데,
해당 포스팅에서 알아보고 이해했던 정보를 기준으로 3D transform rotate를 실행해보는 과정에서
보통 게임 수학을 활용해 회전하던 방식과 다르게 오브젝트가 회전하는 것처럼 보였다.
회전축 기준으로 예제를 만들어 보니,
이전 포스팅에서 실컷 공부를 해두고도 좌표계와 오브젝트를 전혀 별개의 요소로만 보고
두 요소가 서로 어떻게 작용하지는지 조차도 이해 못하고 있다는 걸 깨달았다… 안습이다 😢
그래서 CSS 3d transform에서는 위의 정의와는 어떤 기준이 다른 것인지 끝없는 검색을 하다 결국 다시 제자리..
정답은 바이블 W3C과 수학에 있었다..
일단은 css perspective이해하기 포스팅에서 설명한 투영점을 상상해보면,
Z축 값이 작을 수록 관찰자와 가까워지므로 오른손 좌표계를 활용하면 회전 방향을 특정하기가 쉽다.
하지만 이전 포스팅에서 오른손 좌표계의 회전 방향 설명을 보면 반시계 방향으로 회전한다고 설명하고 있다.
이 부분이 더더욱 헷갈리게 했다.
우선, W3C에서 transform rotate3d에서의 정의를 보면, 축을 기준으로 시계 방향으로 회전을 특정한다고 적혀있다.
rotate3d(<number>, <number>, <number>, <angle>)
W3C
specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters.
If the direction vector is not of unit length, it will be normalized.
A direction vector that cannot be normalized, such as [0, 0, 0], will cause the rotation to not be applied.
각 축에서의 정의를 보면, 주어진 각 앵글 값에 따라 각 축을 기준으로 시계 방향 회전으로 특정한다.
rotateX(<angle>)
specifies a clockwise rotation by the given angle about the X axis.rotateY(<angle>)
specifies a clockwise rotation by the given angle about the Y axis.rotateZ(<angle>)
W3C
specifies a clockwise rotation by the given angle about the Z axis.
양수의 앵글 값이 설정되면 시계 기준 축의 시계 방향으로 회전 시킨다고 보고 아래의 예제를 보자.
X, Y축에서 60도, 140도 시계 방향으로 회전할 때의 예제이다.
X축과는 다르게 Y축에서 회전하고 있는 요소와 화살표의 회전 방향이 반대로 보인다.
여기서부터 헷갈리기 시작했다… 그래서 좌표계를 이리도 돌려보고 저리도 돌려봤지만 이해가 안갔다.
Physics Bootcamp에서 아주 기초적인 설명에서 해답을 찾았다.
오른쪽 그림을 보면 회전의 방향이 시계 방향(양수)이면 회전의 각도(θ)가 음수이고, 반시계 방향(음수)이면 각도(θ)가 양수이다.
위의 예제에서 왼쪽의 동일한 좌표계를 그렸다고 상상하고 회전의 각도가 음수, 즉 시계 방향으로 회전하면 위와 같은 그림이 나온다.
그리고 또 이는 오른손 좌표계 원리와 일치하므로 대입시켜 이해를 해봤다.
오른손으로 만든 후, 시계방향의 축회전 방향대로 손을 회전시켜보자.
X축 회전이라고 한다면, Z축이 내 몸통을 향하고 있고, 오른손 엄지가 오른쪽, 검지가 위를 향하고 있다.
여기서 x축이 시계 방향, 즉 뒤로 회전하고 있다.
그럼 위로 향하고 있던 검지가 누워서 내 몸통 반대편을 가르키게 된다.
위에서 x축으로 60도 회전한 예제를 보면 뒤로 회전하고 있는 걸 볼 수 있다.
Y축 회전이라고 한다면, 위로 향하고 있는 검지를 고정한채로 시계방향 대로 왼쪽으로 회전해보자.
그러면 내 몸통을 향하고 있는 중지가 예제에서 처럼 왼쪽의 내 몸통으로 이동하며 위의 예제와 같은 방향으로
중지와 엄지가 향하는 방향으로 요소가 회전 한 것을 확인 할 수 있다.
Resources
- CSS 3D Transforms Module Level 3
- CODESCRACKERS – CSS transform
- codrops – transform
- codrops – rotate3d()
- mdn – rotateY()
- http://www.physicsbootcamp.org/Describing-Rotation.html
- https://m.blog.naver.com/ruo1022/110188592069
- https://www.git-tower.com/blog/css3-transforms/
Leave a Reply