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)을 기준으로 회전시킵니다.
각 축이 기준이 되기 때문에 실제 움직임은 예상과 반대로 보일 수 있습니다.

예를 들어 물레방아가 위아래로 회전하는 모습을 표현하려면 rotateX(-angle)를 사용합니다.
rotateX()는 x축을 기준으로 위아래 회전을 나타내며, 음수 값을 사용하면 자연스러운 회전 방향을 표현할 수 있습니다.

rotateZ(angle)

rotateZ() 함수는 요소를 주어진 각도만큼 z축을 기준으로 회전시킵니다.
rotateX()와 rotateY()가 3D 공간에서의 회전을 나타낸다면, rotateZ()는 화면을 바라보는 방향에서의 회전을 나타냅니다.

모니터에 있는 요소와 사용자 간의 거리가 z축이 되며, rotateZ()의 움직임은 transform 2D의 rotate()와 동일합니다.
angle이 양수이면 시계 방향, 음수이면 반시계 방향으로 회전합니다.

예를 들어 팽이를 위에서 바라볼 때 시계 또는 반시계 방향으로 회전하는 모습이 rotateZ()에 해당합니다.
반면 옆에서 바라볼 때 가로로 회전하는 모습은 rotateY()로 표현할 수 있습니다.

matrix3d(n×16)

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

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