6개의 매개 변수 값을 이용해서 2차원적인 변환 처리를 해준다.
매개 변수의 타입은 소수를 포함한 정수이다. 6개의 매개 변수 값은 차례대로 scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() 함수 값을 의미한다. rotate() 함수와 연결되는 값은 없지만 아래의 기술 문서를 보면은 matrix() 함수로 회전도 가능하다.
한편으로 matrix() 함수의 인수를 보면 직관적이지 않아 차라리 해당 전용 변형 함수를 사용하는 것이 더 좋을지도 모른다. 반대로 본다면 이러한 이유로 전용 함수를 별도로 준비했을 것이라 추측한다. 하지만 matrix() 함수가 익숙하다면 자바스크립트 로직으로 정교한 애니메이션 작업을 하고자 할 때 유용하다. 그리고 한 요소에게 동시에 다양한 변형을 주고자 한다면 직관적이지 않더라도 코드의 효율면에서도 matrix() 함수가 더 장점을 갖는다.
matrix() 함수를 사용하기 위한 매개 변수의 유형을 나타낸다. 이 값은 총 6개로의 인자로 구성되며 이 값을 토대로 최종 4x4의 행렬로 처리된다.
$$ matrix(1, 2, 3, 4, 5, 6)=\begin{pmatrix} 1(scaleX) & 3(skewX) & 0 & 5(translateX) \\ 2(skewY) & 4(scaleY) & 0 & 6(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
행렬에서 0과 1은 고정된 값으로 내부적으로 처리된다.
〈number〉 [, 〈number〉 ]{5,5}
6개의 값 a, b, c, d, e, f의 <number>는 변환 행렬 형식으로 2D 변환을 지정한다.
$$ \begin{pmatrix} a & c & 0 & e \\ b & d & 0 & f \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
수학적으로 모든 변환 함수는 다음 형식의 4x4 변환 행렬로 나타낼 수 있다.
$$ \begin{pmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{pmatrix}$$
$$ matrix(1.5, 0, 0, 1.5, 0, 0)=\begin{pmatrix} 1.5(scaleX) & 0(skewX) & 0 & 0(translateX) \\ 0(skewY) & 1.5(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1.5, 0, 0, 1, 0, 0)=\begin{pmatrix} 1.5(scaleX) & 0(skewX) & 0 & 0(translateX) \\ 0(skewY) & 1(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, 0, 0, 1.5, 0, 0)=\begin{pmatrix} 1(scaleX) & 0(skewX) & 0 & 0(translateX) \\ 0(skewY) & 1.5(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, 0, 0, 1, 50, 0)=\begin{pmatrix} 1(scaleX) & 0(skewX) & 0 & 50(translateX) \\ 0(skewY) & 1(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, 0, 0, 1, 0, 50)=\begin{pmatrix} 1(scaleX) & 0(skewX) & 0 & 0(translateX) \\ 0(skewY) & 1(scaleY) & 0 & 50(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, 0, 0, 1, 50, 50)=\begin{pmatrix} 1(scaleX) & 0(skewX) & 0 & 50(translateX) \\ 0(skewY) & 1(scaleY) & 0 & 50(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, 0, tan(15), 1, 0, 0)=\begin{pmatrix} 1(scaleX) & tan15(skewX) & 0 & 0(translateX) \\ 0(skewY) & 1(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, tan(15), 0, 1, 0, 0)=\begin{pmatrix} 1(scaleX) & 0(skewX) & 0 & 0(translateX) \\ tan15(skewY) & 1(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(1, tan(15), tan(15), 1, 0, 0)=\begin{pmatrix} 1(scaleX) & tan15(skewX) & 0 & 0(translateX) \\ tan15(skewY) & 1(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
$$ matrix(cos(180), sin(180), sin(-180), cos(180), 0, 0)=\begin{pmatrix} cos180(scaleX) & -sin180(skewX) & 0 & 0(translateX) \\ sin180(skewY) & cos180(scaleY) & 0 & 0(translateY) \\ 0& 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Transforms Module Level 1 | 추천 후보 | Last review date: 2022-11-17 |
