CSS의 matrix() 변환 함수를 사용하면 2차원 좌표계에서 요소의 형태와 위치를 자유롭게 조절할 수 있습니다. 이 함수는 6개의 매개변수를 받아 회전, 확대·축소, 기울이기, 이동 등의 효과를 하나의 행렬로 처리합니다.
아래 예제는 matrix(1, -0.3, 0, 1, 0, 0) 값을 적용하여 div 요소를 기울여 회전시키는 방법을 보여줍니다.
예제 코드
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv1 {
/* IE 9 */
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Safari */
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
/* Standard syntax */
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<div>
Welcome to my website.
</div>
<div id = "myDiv1">
Welcome to my website.
</div>
</body>
</html>실행 결과
위 코드를 실행하면 첫 번째 div는 원본 그대로 표시되고, 두 번째 div는 matrix 값에 의해 살짝 기울어진 형태로 렌더링됩니다.
matrix() 함수의 매개변수 이해하기
matrix(a, b, c, d, e, f)의 각 매개변수는 다음과 같은 역할을 합니다.
- a: 가로 방향 크기 조절(scaleX)
- b: 세로 방향 기울이기(skewY)
- c: 가로 방향 기울이기(skewX)
- d: 세로 방향 크기 조절(scaleY)
- e: 가로 방향 이동(translateX)
- f: 세로 방향 이동(translateY)
브라우저 호환성 참고 사항
구형 브라우저와의 호환성을 위해 벤더 접두사(vendor prefix)를 함께 사용하는 것이 좋습니다. 위 예제처럼 Internet Explorer 9에는 -ms-transform, Safari 및 구버전 Chrome에는 -webkit-transform을 추가하면 됩니다. 최신 브라우저에서는 표준 문법인 transform 속성만으로도 정상적으로 동작합니다.