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
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>
데이터 타입을 확인하세요.