CSS의 transform 속성과 skewY() 함수를 사용하면 요소를 Y축(세로 축)을 기준으로 기울일 수 있습니다. 아래 예제 코드를 직접 실행해 보면서 동작 방식을 확인해 보세요.
예제 코드
아래 코드에서 첫 번째 div는 기울임이 적용되지 않은 기본 상태이고, 두 번째 div에는 skewY(20deg)가 적용되어 세로 방향으로 20도 기울어진 것을 확인할 수 있습니다.
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* 표준 문법 */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Welcome to my website.
</div>
<div id = "skewDiv">
Welcome to my website.
</div>
</body>
</html>코드 설명
skewY(20deg)는 요소의 각 가로줄을 세로 방향으로 밀어내어 요소 전체가 Y축을 중심으로 기울어지도록 만듭니다. 각도 값이 양수이면 위쪽 방향으로, 음수이면 아래쪽 방향으로 기울어집니다.
코드에 포함된 접두사(prefix)는 구형 브라우저와의 호환성을 위한 것입니다. Internet Explorer 9에서는 -ms-transform, Safari 등 WebKit 기반 브라우저의 구버전에서는 -webkit-transform을 사용해야 정상적으로 동작합니다. 최신 브라우저에서는 표준 문법인 transform만으로도 충분합니다.