Transform 3D - by. UXKM

z축에 대한 이해

transform 3D에서도 transform 2D의 값은 동일하게 사용됩니다.
x, y축은 2D와 동일하게 좌/우, 상/하를 의미하며, z축은 사용자와의 거리(3D)를 의미합니다.
해당 요소의 z값이 양수이면 사용자와 가까워지며(확대와 비슷), 음수이면 사용자와 멀어(축소와 비슷)집니다.

translate3d(x, y, z)

translate3d(x, y, z) 메소드는 현재 위치에서 해당 요소를 주어진 x축과 y축, z축의 거리만큼 이동시킵니다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킵니다.

translateZ(tz)

현재의 위치에서 해당 요소를 주어진 z축의 거리만큼 이동시킵니다.
값이 클수록 사용자와 가까워집니다.

scale3d(sx, sy, sz)

해당 요소의 크기를 주어진 배율만큼 x축, y축과 z축 방향으로 늘리거나 줄입니다.

scaleZ(sz)

scale()의 기능이 해당 요소를 늘리거나 줄이는 것인데 css는 두께의 개념이 없어 z축을 늘어나게 하는 것이 불가능합니다.
따라서 scaleZ()의 z축은 그 자체로는 의미가 없습니다.
perspective와 translateZ()를 같이 사용해야 목적에 맞는 구현이 가능합니다.

rotate3d(x, y, z, angle)

해당 요소를 주어진 각도만큼 x축, y축과 z축을 기준으로 회전시킵니다.

• 3D 공간에서 회전에는 3개의 자유도가 있으며 회전축을 나타냅니다.
• 회전축은 요소의 원점(transform-origin으로 정의된 값)과 rotate3d(x, y, z, angle)를 통과합니다.

rotateX(angle), rotateY(angle)

rotateX(angle), rotateY(angle) 메소드는 해당 요소를 주어진 각도만큼 각각의 축(x, y)을 기준으로 회전시킵니다.

각각의 축이 기준이기 때문에 실제 움직임은 반대로 움직이는 것처럼 보일 수 있습니다.
예를 들어 물레방아를 물이 내려오는 방향으로 봤을 때 세로(위, 아래)로 방향으로 회전합니다.
이 물레방아의 움직임을 transform로 표현하려면 rotateX(-angle)를 이용해야 합니다.
rotateX(-angle)에서 angle을 음수(-)로 선언하면 해당 요소는 가로(x) 축 기준으로 위, 아래의 회전이 됩니다.

rotateZ(angle)

rotateZ() 메소드는 해당 요소를 주어진 각도만큼 z축을 기준으로 회전시킵니다.

rotateX(), rotateY()는 각각의 기준 축이 2D(평면의 x, y축) 움직임이 3D입니다.
반면 rotateZ()는 기준 축이 3D(공간의 z축) 움직임이 2D 입니다.
모니터에 있는 해당 요소와 사용자(user)간의 수평(수직) 적인 거리가 z축이 됩니다.
그러므로 rotateZ()의 움직임은 transform 2D의 rotate()와 마찬가지로 angle이 양수이면 시계 방향, 음수이면 반시계 방향으로 움직입니다.

rotateZ()의 움직임을 예를 들면 팽이가 있습니다.
땅 바닥을 바라보고 팽이를 돌렸을 때 팽이의 z축은 바닥과 팽이를 바라보는 눈 사이가 되고 팽이는 시계 또는 반시계 방향으로 회전합니다.
하지만 바닥에 엎드려 회전하고 있는 팽이를 본다면 y축을 기준으로 가로로 회전하는 것을 볼 수 있습니다. 이때 팽이의 움직임은 rotateY()가 됩니다.

matrix3d(n×16)

4x4 행렬을 이용한 16개의 매개변수로 모든 3D 변형 메소드를 한 번에 설정합니다.

matrix3d ​​( a1 , b1 , c1 , d1 , a2 , b2 , c2 , d2 , a3 , b3 , c3 , d3 , a4 , b4 , c4 , d4 );