backdrop-hue-rotate

backdrop-hue-rotate (백드롭 색상 회전)

요소 뒤쪽(백드롭)의 색조(hue)를 회전시켜 주는 유틸리티예요. 디그리(deg) 단위로 각도를 지정해 색을 돌려 보여줘요.

출처: 문서

본문

ClassStyles

클래스	스타일
`backdrop-hue-rotate-<number>`	`backdrop-filter: hue-rotate(<number>deg);`
`-backdrop-hue-rotate-<number>`	`backdrop-filter: hue-rotate(calc(<number>deg * -1));`
`backdrop-hue-rotate-(<custom-property>)`	`backdrop-filter: hue-rotate(var(<custom-property>));`
`backdrop-hue-rotate-[<value>]`	`backdrop-filter: hue-rotate(<value>);`

Examples

Basic example

backdrop-hue-rotate-90이나 backdrop-hue-rotate-180 같은 유틸리티를 사용하면 요소의 백드롭 색조를 회전시킬 수 있어요.

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-hue-rotate-90 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-hue-rotate-180 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 backdrop-hue-rotate-270 ..."></div>
</div>

Using negative values

-backdrop-hue-rotate-90이나 -backdrop-hue-rotate-180 같은 유틸리티를 사용하면 음수 백드롭 색조 회전 값을 지정할 수 있어요.

<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 -backdrop-hue-rotate-15 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 -backdrop-hue-rotate-45 ..."></div>
</div>
<div class="bg-[url(/img/mountains.jpg)]">
  <div class="bg-white/30 -backdrop-hue-rotate-90 ..."></div>
</div>

Using a custom value

완전히 커스텀한 값으로 백드롭 색조 회전을 지정하고 싶다면 backdrop-hue-rotate-[<value>] 문법을 사용해요.

<div class="backdrop-hue-rotate-[3.142rad] ...">
  <!-- ... -->
</div>

CSS 변수로 지정하고 싶다면 backdrop-hue-rotate-(<custom-property>) 문법도 사용할 수 있어요.

<div class="backdrop-hue-rotate-(--my-backdrop-hue-rotation) ...">
  <!-- ... -->
</div>

이것은 backdrop-hue-rotate-[var(<custom-property>)]의 단축 표기로, var() 함수를 자동으로 넣어 주는 문법이에요.

Responsive design

backdrop-filter: hue-rotate() 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면, 중간 크기(md) 화면 이상에서만 해당 유틸리티를 적용할 수 있어요.

<div class="backdrop-hue-rotate-15 md:backdrop-hue-rotate-0 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 자세히 알고 싶다면 variants 문서를 참고해 주세요.

backdrop-hue-rotate