The matrix() Method

이 matrix()방법은 모든 2D 변환 방법을 하나로 결합합니다.

matrix () 메서드는 수학 함수가 포함 된 6 개의 매개 변수를 사용하여 요소를 회전, 크기 조절, 이동 (병합) 및 비뚤어지게 할 수 있습니다.

매개 변수는 다음과 같습니다. matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())

예

div {

    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */

    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */

    transform: matrix(1, -0.3, 0, 1, 0, 0);

}

<!DOCTYPE html>

<html>

<head>

<style>

div {

    width: 300px;

    height: 100px;

    background-color: yellow;

    border: 1px solid black;

}

div#myDiv1 {

    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */

    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */

    transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */

}

div#myDiv2 {

    -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */

    -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */

    transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */

}

</style>

</head>

<body>

<p>The matrix() method combines all the 2D transform methods into one.</p>

<div>

This a normal div element.

</div>

<div id="myDiv1">

Using the matrix() method.

</div>

<div id="myDiv2">

Another use of the matrix() method.

</div>

</body>

</html>