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 순서로 설명됩니다.
matrix(a, b, c, d, tx, ty)
Values
Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
---|---|---|---|
[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>
데이터 타입을 확인하세요.