CSS matrix3d() 함수

정의와 사용법

CSS의 matrix3d() 함수는 16개의 값을 포함한 4x4 행렬을 사용하여 3차원 변환을 정의합니다：

인스턴스

예제 1

사용 matrix3d() 다른 <div> 요소에 3차원 변환을 정의합니다：

.div1 {
  transform: matrix3d(
    0.7, 0.1, 0.7, 0
    -0.6, 0.7, 0.2, 0
    -0.5, -0.8, 0.7, 0
    10, 10, 0, 1
  );
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
}

직접 시도해 보세요

예제 2

사용 matrix3d() 다른 <div> 요소에 3차원 변환을 만듭니다：

.div1 {
  font-size: 30px;
  font-weight: bold;
  width: 280px;
  height: 40px;
  padding: 10px;
  background: beige;
  font-family: verdana;
  border: 1px solid green;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
  margin: 50px auto;
}
.div1:hover {
.div1:focus {
  transform: rotate3d(1, 1, 1, 30deg);
  matrix3d(1, 0, 0, 0, 0, 1, 6, 0, 0, 0, 1, 0, 50, 100, 0, 1.1);
}

직접 시도해 보세요

CSS 문법

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 트랜스폼 속성

참조:CSS 매트릭스() 함수

강의:CSS 3D 변환