Functions

Editing

matrix3d(<arg-matrix3d>)

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

매개 변수

matrix3d() 함수를 사용하기 위한 매개 변수의  유형을 나타낸다. 이 값은 총 16개의 인자로 구성되며 이 값을 토대로 4x4의 동차 행렬로 처리된다.

$$ matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)= \begin{pmatrix} a1 & a2 & a3 & a4 \\ b1 & b2 & b3 & b4 \\ c1 & c2 & c3 & c4 \\ d1 & d2 & d3 & d4 \end{pmatrix}$$

  • CSS Transforms Module Level 2
    <number>#{16}

    16개의 값 a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4<number>는 동차 행렬 형식으로 3D 변환을 지정한다.

    matrix3d() 함수 테스트
Details

포함된 타입

  • <number>

    정수 또는 실수를 표현한다.

기술 문서

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}$$

버전 명세

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

Last review date: 2022-11-14

지원 웹브라우저