Properties

Properties

Editing
  • account_tree
  • bug_report

matrix3d()

16개의 매개 변수 값으로 4x4 행렬을 사용하여 3차원적인 변형을 처리한다.

버전 명세

Modules
Module NameStatusSummary
CSS Transforms Module Level 2초안 작업

Last review date: 2022-11-14

기술 문서

CSS에서 행렬의 사용

수학적으로 모든 변환 함수는 다음 형식의 4x4 변환 행렬로 나타낼 수 있다.

$$ \begin{pmatrix} m11 & m21 & m31 & m41 \\ m12 & m22 & m32 & m42 \\ m13 & m23 & m33 & m43 \\ m14 & m24 & m34 & m44 \end{pmatrix}$$

matrix3d() 함수를 사용한 변형 예

scale in the x, y, z axis

$$ matrix3d(1.5, 0, 0, 0, 0, 1.5, 0, 0, 0, 0, 5, 0, 0, 0, 0, 1 )=\begin{pmatrix} 1.5(sx) & 0 & 0 & 0 \\ 0 & 1.5(sy) & 0 & 0 \\ 0 & 0 & 5(sz) & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

translation in the x, y, z axis

$$ matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 20, 30, 1 )=\begin{pmatrix} 1(sx) & 0 & 0 & 50(tx) \\ 0 & 1(sy) & 0 & 20(ty) \\ 0 & 0 & 1(sz) & 30(tz) \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

rotate in the x axis

$$ matrix3d(1, 0, 0, 0, 0, cos(⍺), sin(⍺), 0, 0, -sin(⍺), cos(⍺), 0, 0, 0, 0, 1 )=\begin{pmatrix} 1 & 0 & 0 & 0 \\ 0 & cos(⍺) & -sin(⍺) & 0 \\ 0 & sin(⍺) & cos(⍺) & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

rotate in the y axis

$$ matrix3d(cos(⍺), 0, -sin(⍺), 0, 0, 1, 0, 0, sin(⍺), 0, cos(⍺), 0, 0, 0, 0, 1 )=\begin{pmatrix} cos(⍺) & 0 & sin(⍺) & 0 \\ 0 & 1 & 0 & 0 \\ -sin(⍺) & 0 & cos(⍺) & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

rotate in the z axis

$$ matrix3d(cos(⍺), sin(⍺), 0, 0, -sin(⍺), cos(⍺), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 )=\begin{pmatrix} cos(⍺) & -sin(⍺) & 0 & 0 \\ sin(⍺) & cos(⍺) & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

perspective

$$ matrix3d(cos(⍺), sin(⍺), 0, 0, -sin(⍺), cos(⍺), 0, 0, 0, 0, 1, -1/d, 0, 0, 0, 1 )=\begin{pmatrix} cos(⍺) & -sin(⍺) & 0 & 0 \\ sin(⍺) & cos(⍺) & 0 & 0 \\ 0 & 0 & 1 & -/d \\ 0 & 0 & 0 & 1 \end{pmatrix}$$

지원 웹브라우저