matrix()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 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)

Values

a b c d

<number>는 선형 변환(linear transformation)을 설명합니다.

tx ty

<number>는 적용 할 이동(translation)을 설명합니다.

Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]

Examples

HTML

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

CSS

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

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

Result

Browser compatibility

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

See also