CSS matrix() 함수

정의와 사용법

CSS의 matrix() 이 함수는 여섯 개의 값을 포함한 행렬을 통해 이차원 변환을 정의합니다。

matrix() 이 함수는 여섯 개의 파라미터를 받아들여서 요소에 회전, 확대, 이동 및 기울임을 적용할 수 있습니다。

파라미터는 다음과 같습니다：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

예제

예제 1

사용 matrix() 여러 <div> 요소에 이차원 변환을 정의하십시오：

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

직접 테스트해 보세요

예제 2

사용 matrix() 이미지에 이차원 변환을 생성하십시오：

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

직접 테스트해 보세요

CSS 문법

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

기술 세부 사항

브라우저 지원

표에서의 숫자는 이 함수를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

관련 페이지

참조:CSS 변환 속성

참조:CSS matrix3d() 함수

강의:CSS 2D 변환