skewY 함수

skewY 함수는 Y축을 따라 요소를 비틀어 평행사변형으로 만듭니다. transform 속성과 함께 사용됩니다. 속성 값은 각도 단위로 지정된 각도입니다. 각도는 양수 또는 음수일 수 있습니다. 양수 값은 위쪽으로 비틀고, 음수 값은 아래쪽으로 비틉니다. 비틀기는 transform-origin 속성으로 지정된 점을 중심으로 수행됩니다.

구문

css선택자 {
  transform: skewY(각도);
}

예제

이 예제에서 블록은 30도 위쪽으로 비틀어집니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewY(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

예제

이 예제에서 블록은 30도 아래쪽으로 비틀어집니다:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skewY(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

함께 보기