matrix()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

matrix() CSS 함수는 2D 변형 동차 행렬을 선언합니다. 결과는 <transform-function> 데이터 타입입니다.

경고: matrix(a, b, c, d, tx, ty) 는 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 를 짧게 쓴 것입니다.

Syntax

matrix() 함수는 6개의 값을 지정합니다. 상수 값은 묵시적이며, 매개변수(parameter)로 전달하지 않습니다. 다른 매개 변수는 column-major 순서로 설명됩니다.

참고 : Firefox 16까지, Gecko(엔진) tx, ty 에<length> 값을 허용했습니다.

matrix(a, b, c, d, tx, ty)

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
$(\begin{matrix} a & c \\ b & d \end{matrix})$	$(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} a & c \\ b & d \end{matrix})$	`[a b c d tx ty]`

html

<div>Normal</div>
<div class="changed">Changed</div>

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

호환성 정보는 <transform-function> 데이터 타입을 확인하세요.