skew 함수
skew 함수는 요소를 기울여
직사각형을 평행사변형으로 변환합니다.
transform 속성과
함께 사용됩니다.
속성 값은 각도 단위로 지정된
각도입니다. 기울이기는
transform-origin 속성으로
지정된 점을 중심으로 수행됩니다.
쉼표로 구분된 하나 또는 두 개의 매개변수를 사용할 수 있습니다. 매개변수가 두 개인 경우, 첫 번째 매개변수는 수평 기울이기를, 두 번째 매개변수는 수직 기울이기를 지정합니다. 매개변수가 하나인 경우, 이는 수평 기울이기를 지정합니다(양쪽 축이 아님). 매개변수는 양수 또는 음수일 수 있습니다.
구문
선택자 {
transform: skew(하나 또는 두 개의 각도);
}
예제
이 예제에서 블록은 왼쪽으로 30도 기울어져 있습니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
예제
이 예제에서 블록은 오른쪽으로 30도 기울어져 있습니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(-30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
예제
이 예제에서 블록은 수직으로(양의 값) 30도 기울어져 있습니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
예제
이 예제에서 블록은 수직으로(음의 값) 30도 기울어져 있습니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(0deg, -30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
예제
X축과 Y축을 동시에 기울입니다:
<div id="elem">lorem ipsum</div>
#elem {
transform: skew(30deg, 30deg);
border: 1px solid black;
width: 100px;
height: 50px;
}
:
