CSS3 matrix3d() 함수 완벽 가이드 – 4x4 3D 변환 행렬 정의하기

CSS3 matrix3d() 함수란?

CSS의 matrix3d() 함수는 4x4 동차(homogeneous) 좌표계의 3D 변환 행렬을 정의하는 데 사용됩니다. 이 함수를 활용하면 요소에 이동(translate), 회전(rotate), 확대·축소(scale), 기울임(skew) 등의 3차원 변형을 하나의 선언으로 동시에 적용할 수 있습니다.

matrix3d() 함수는 총 16개의 매개변수를 받으며, 각 값은 열(column) 단위 순서로 지정됩니다. 마지막 열에서 네 번째 값(d4)은 일반적으로 1로 고정되며, 그 앞의 세 값은 각각 X, Y, Z축 방향의 이동 거리를 나타냅니다.

예제 1

다음은 matrix3d() 함수를 사용해 이미지 요소에 3D 변환을 적용하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo_img {
   transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="demo_img" src=
"https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

출력 결과

CSS3 matrix3d() 함수 완벽 가이드 – 4x4 3D 변환 행렬 정의하기

예제 2

이번에는 서로 다른 매개변수 값을 사용해 변환 효과가 어떻게 달라지는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo_img {
   transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,50,-100,0,1.1);
}
</style>
</head>
<body>
<h1>Learn</h1>
<p>Learn Apache Spark</p>
<img class="demo_img" src=
"https://www.tutorialspoint.com/machine_learning/images/machine-learning-mini-logo.jpg" alt="Apache Spark">
</body>
</html>

출력 결과

CSS3 matrix3d() 함수 완벽 가이드 – 4x4 3D 변환 행렬 정의하기

정리

matrix3d() 함수는 개별 transform 속성보다 복잡하지만, 여러 3D 변환을 한 번에 제어할 수 있어 애니메이션 성능 최적화나 정밀한 변형 계산이 필요한 경우에 유용하게 활용됩니다. 처음에는 translate3d(), rotate3d(), scale3d() 같은 개별 함수로 익힌 뒤, 필요에 따라 matrix3d()로 확장해 학습하는 것을 추천합니다.