matrix()

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 순서로 설명됩니다.

참고: 주의: 파이어폭스 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
a c b d a c tx b d ty 0 0 1 a c tx b d ty 0 0 1 a c 0 tx b d 0 ty 0 0 1 0 0 0 0 1
[a b c d tx ty]

Examples

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

Result

Browser compatibility

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

See also