트랜스폼
skew
엘리먼트를 기울이는 변형(transform) 유틸리티입니다.
| Class | Styles |
|---|---|
skew-<number> | transform: skewX(<number>deg) skewY(<number>deg); |
-skew-<number> | transform: skewX(-<number>deg) skewY(-<number>deg); |
skew-(<custom-property>) | transform: skewX(var(<custom-property>)) skewY(var(<custom-property>)); |
skew-[<value>] | transform: skewX(<value>) skewY(<value>); |
skew-x-<number> | transform: skewX(<number>deg)); |
-skew-x-<number> | transform: skewX(-<number>deg)); |
skew-x-(<custom-property>) | transform: skewX(var(<custom-property>)); |
skew-x-[<value>] | transform: skewX(<value>)); |
skew-y-<number> | transform: skewY(<number>deg); |
-skew-y-<number> | transform: skewY(-<number>deg); |
skew-y-(<custom-property>) | transform: skewY(var(<custom-property>)); |
skew-y-[<value>] | transform: skewY(<value>); |
예제
기본 예제
skew-<number> 유틸리티를 사용해 엘리먼트를 양축으로 기울일 수 있습니다. 예를 들어 skew-4와 skew-10 같은 유틸리티를 사용할 수 있습니다.
skew-3
skew-6
skew-12
<img class="skew-3 ..." src="/img/mountains.jpg" /><img class="skew-6 ..." src="/img/mountains.jpg" /><img class="skew-12 ..." src="/img/mountains.jpg" />음수 값 사용하기
-skew-<number> 유틸리티를 사용해 엘리먼트를 양축으로 기울일 수 있습니다. 예를 들어 -skew-4나 -skew-10과 같은 값을 적용할 수 있습니다.
-skew-3
-skew-6
-skew-12
<img class="-skew-3 ..." src="/img/mountains.jpg" /><img class="-skew-6 ..." src="/img/mountains.jpg" /><img class="-skew-12 ..." src="/img/mountains.jpg" />x축 기울이기
skew-x-<number> 유틸리티를 사용해 엘리먼트를 x축으로 기울일 수 있습니다. 예를 들어 skew-x-4나 -skew-x-10 같은 클래스를 사용할 수 있습니다.
-skew-x-12
skew-x-6
skew-x-12
<img class="-skew-x-12 ..." src="/img/mountains.jpg" /><img class="skew-x-6 ..." src="/img/mountains.jpg" /><img class="skew-x-12 ..." src="/img/mountains.jpg" />y축 기울이기
skew-y-<number> 유틸리티를 사용해 엘리먼트를 y축으로 기울일 수 있습니다. 예를 들어 skew-y-4나 -skew-y-10과 같은 클래스를 사용할 수 있습니다.
-skew-y-12
skew-y-6
skew-y-12
<img class="-skew-y-12 ..." src="/img/mountains.jpg" /><img class="skew-y-6 ..." src="/img/mountains.jpg" /><img class="skew-y-12 ..." src="/img/mountains.jpg" />커스텀 값 사용하기
skew-[<value>] 구문을 사용하세요 skew를 완전히 커스텀한 값으로 설정하려면:
<img class="skew-[3.142rad] ..." src="/img/mountains.jpg" />CSS 변수를 사용하려면 skew-(<custom-property>) 구문을 사용할 수도 있습니다:
<img class="skew-(--my-skew) ..." src="/img/mountains.jpg" />이는 skew-[var(<custom-property>)] 의 단축 표현으로, 자동으로 var() 함수를 추가해 줍니다.
반응형 디자인
접두사 skewX() 그리고 skewY() 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:
<img class="skew-3 md:skew-12 ..." src="/img/mountains.jpg" />변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.
