CSS3에서 matrix3d()로 요소 변환하기
CSS3에서는 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 메서드를 사용하면 행렬(matrix)의 16개 값을 이용해 요소를 자유롭게 변환(transform)할 수 있습니다. 이 함수는 4x4 크기의 변환 행렬을 정의하며, 2D 변환보다 훨씬 정교한 3D 변환(이동, 회전, 확대·축소, 기울이기 등)을 구현할 때 활용됩니다.
기본 문법
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)
각 값의 의미는 다음과 같습니다.
- a1 b1 c1 d1 / a2 b2 c2 d2 / a3 b3 c3 d3 : 선형 변환(linear transformation)을 나타내는 숫자 값입니다. 요소의 회전, 크기 조절, 기울임 같은 변형 효과를 결정합니다.
- a4 b4 c4 : 적용할 이동(translation) 거리를 나타내는 숫자 값입니다. X축, Y축, Z축 방향으로 요소를 얼마나 평행 이동시킬지 지정합니다.
즉, 앞의 12개 값은 요소의 형태를 바꾸는 역할을 하고, 마지막 세 개의 값은 요소의 위치를 옮기는 역할을 합니다. 일반적으로 초기 상태 그대로 두고 싶다면 matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1)처럼 단위 행렬(identity matrix)을 사용합니다.