6개의 매개 변수 값을 이용해서 2차원적인 변환 처리를 해준다.
매개 변수의 타입은 소수를 포함한 정수이다. 6개의 매개 변수 값은 차례대로 scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() 함수 값을 의미한다. rotate() 함수와 연결되는 값은 없지만 아래의 기술 문서를 보면은 matrix() 함수로 회전도 가능하다.
한편으로 matrix() 함수의 인수를 보면 직관적이지 않아 차라리 해당 전용 변형 함수를 사용하는 것이 더 좋을지도 모른다. 반대로 본다면 이러한 이유로 전용 함수를 별도로 준비했을 것이라 추측한다. 하지만 matrix() 함수가 익숙하다면 자바스크립트 로직으로 정교한 애니메이션 작업을 하고자 할 때 유용하다. 그리고 한 요소에게 동시에 다양한 변형을 주고자 한다면 직관적이지 않더라도 코드의 효율면에서도 matrix() 함수가 더 장점을 갖는다.
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Transforms Module Level 1 | 추천 후보 | Last review date: 2022-11-17 |
수학적으로 모든 변환 함수는 다음 형식의 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}$$
