skewX 함수

함수 skewX는 요소를 X축을 따라 기울여 평행사변형으로 변환합니다. transform 속성과 함께 사용됩니다. 속성 값은 모든 각도 단위로 지정된 각도입니다. 각도는 양수 또는 음수일 수 있습니다. 양수 값은 왼쪽으로, 음수 값은 오른쪽으로 기울입니다. 기울임은 transform-origin 속성으로 지정된 점을 중심으로 수행됩니다.

구문

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

예제

이 예제에서 블록은 30도 왼쪽으로 기울어져 있습니다:

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

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

Результат:

예제

이 예제에서 블록은 30도 오른쪽으로 기울어져 있습니다:

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

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

Результат:

같이 보기