The matrix() Method > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

The matrix() Method 정보

CSS The matrix() Method

본문

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>


추천
0

댓글 0개

전체 1,263
퍼블리셔팁 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT