CSS에서 skewY() 함수를 사용하면 요소를 y축(세로축)을 따라 기울이는 변환 효과를 손쉽게 적용할 수 있습니다. 이 함수는 지정한 각도만큼 요소를 세로 방향으로 왜곡시키며, 요소 내부의 텍스트나 콘텐츠 역시 함께 기울어지게 됩니다.
아래 예제 코드를 실행하면 두 개의 div 요소 중 하나에 skewY(20deg)가 적용되어 y축 방향으로 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);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<div>
Tutorials point.com.
</div>
<div id = "skewDiv">
Tutorials point.com
</div>
</body>
</html>실행 결과
코드 설명
위 코드의 핵심은 다음과 같습니다.
- 첫 번째 div는 아무런 변환 없이 일반적인 사각형 형태로 표시됩니다.
- 두 번째 div(id가 "skewDiv")에는 transform: skewY(20deg)가 적용되어 세로축을 따라 20도만큼 기울어집니다.
- 구형 브라우저와의 호환성을 위해 Internet Explorer 9용 -ms-, Safari용 -webkit- 벤더 접두사도 함께 작성되어 있습니다.
참고로 x축 방향으로 기울이고 싶다면 skewX() 함수를, x축과 y축을 동시에 적용하고 싶다면 skew(xAngle, yAngle) 형태로 사용하면 됩니다.