CSS의 matrix() 함수를 사용하면 요소를 원하는 방향으로 자유롭게 변형할 수 있습니다. 이번 예제에서는 매트릭스 변환을 활용해 요소를 다른 방향으로 기울이고 이동시키는 방법을 알아보겠습니다.
매트릭스 변환이란?
matrix() 함수는 6개의 인수를 받아 요소에 복합적인 변형(스케일, 회전, 기울임, 이동)을 한 번에 적용합니다. 아래 코드에서는 matrix(1, 0, 0.5, 1, 150, 0)을 사용하여 요소를 비스듬히 기울인 후 오른쪽으로 이동시켰습니다.
예제 코드
다음 코드를 실행하면 두 개의 div 요소 중 두 번째 요소가 매트릭스 변환을 통해 다른 방향으로 변형되는 것을 확인할 수 있습니다.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv2 {
/* IE 9 */
-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* Safari */
-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
/* 표준 문법 */
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
Tutorialspoint.com
</div>
<div id = "myDiv2">
Tutorialspoint.com
</div>
</body>
</html>실행 결과
위 코드를 브라우저에서 실행하면 첫 번째 div는 그대로 표시되고, 두 번째 div(id가 myDiv2인 요소)는 X축 방향으로 기울어진(skew) 형태로 오른쪽으로 150px 이동하여 나타납니다.
주요 포인트
- -ms-transform: Internet Explorer 9 호환성을 위한 접두사입니다.
- -webkit-transform: Safari 등 WebKit 기반 브라우저를 위한 접두사입니다.
- transform: 최신 브라우저에서 사용되는 표준 문법입니다.
참고로 현재는 대부분의 최신 브라우저에서 표준 transform 속성만으로도 충분하지만, 구형 브라우저 지원이 필요한 경우 벤더 접두사를 함께 작성하는 것이 좋습니다.