CSS에서 skewX() 함수를 사용하면 요소를 X축(가로 방향)을 기준으로 기울일 수 있습니다. 이 속성은 지정한 각도만큼 요소를 수평으로 왜곡하여, 텍스트나 이미지에 독특한 시각적 효과를 주고 싶을 때 유용하게 활용됩니다.
주요 브라우저 호환성
구형 브라우저와의 호환성을 위해 벤더 접두사(vendor prefix)를 함께 작성하는 것이 좋습니다. 아래 예제는 Internet Explorer 9용 -ms-, Safari 및 구버전 WebKit 브라우저용 -webkit- 접두사와 표준 문법을 모두 포함하고 있습니다.
예제 코드
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>코드 설명
- 모든
<div>요소에는 너비 300px, 높이 100px, 분홍색 배경과 검정 테두리가 적용됩니다. #skewDiv에만skewX(20deg)가 적용되어 요소가 X축을 따라 20도 기울어집니다.
실행 결과
위 코드를 실행하면 두 개의 분홍색 박스가 표시되며, 아래쪽 박스(skewDiv)는 위쪽 박스와 달리 20도만큼 가로 방향으로 기울어진 형태로 나타납니다.