CSS matrix() 함수란?
CSS의 matrix() 함수는 동차(homogeneous) 2D 변환 행렬을 정의하는 데 사용되는 변환 함수입니다. 요소에 적용할 선형 변환을 여섯 개의 매개변수로 지정하며, 이를 통해 확대·축소(scale), 기울이기(skew), 이동(translate) 등의 효과를 하나의 선언으로 동시에 처리할 수 있습니다.
기본 문법은 다음과 같습니다.
transform: matrix(a, b, c, d, e, f);
각 매개변수의 의미는 다음과 같습니다.
- a: 수평(x축) 방향 크기 조절
- b: 수직 기울임(skewY)
- c: 수평 기울임(skewX)
- d: 수직(y축) 방향 크기 조절
- e: 수평 방향 이동(translateX)
- f: 수직 방향 이동(translateY)
예제 1
첫 번째 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: matrix(2, 1, -1, 1, 190, 100);
}
.skew_img {
transform-origin: top right;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>실행 결과
위 코드에서 matrix(2, 1, -1, 1, 190, 100)는 이미지를 x축으로 2배 확대하고, 기울임 효과를 더한 뒤 오른쪽으로 190px, 아래로 100px 이동시킵니다.
예제 2
이번에는 다른 매개변수 값을 적용한 두 번째 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
transform: matrix(0.9, 0.8, -0.8, 0.8, 100, -30);
}
.skew_img {
transform-origin: left;
transform: skew(-0.10turn, 30deg);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="demo" src="https://www.tutorialspoint.com/numpy/images/numpy-mini-logo.jpg" alt="Numpy">
<img class="skew_img" src="https://www.tutorialspoint.com/apache_spark/images/apache-spark-mini-logo.jpg" alt="Apache Spark">
</body>
</html>실행 결과
이 예제에서는 matrix(0.9, 0.8, -0.8, 0.8, 100, -30)를 사용해 이미지를 축소하면서 회전과 유사한 형태로 왜곡하고, 오른쪽으로 100px, 위쪽으로 30px 이동시켰습니다.
정리
matrix() 함수는 scale(), skew(), translate() 등 개별 변환 함수들을 조합해야 하는 상황에서 하나의 선언으로 간결하게 처리할 수 있다는 장점이 있습니다. 다만 각 값이 행렬 계산에 직접 대응하기 때문에 직관성이 떨어질 수 있으므로, 복잡한 변환이 필요할 때 유용하게 활용하는 것이 좋습니다.