Filter Hue Rotate

Putar warna rona

Sintaks

visual="hue-rotate:[degrees]"

Nilai

Nilai	CSS Output	Huraian
0	filter: hue-rotate(0deg)	Tiada putaran
90	filter: hue-rotate(90deg)	Putaran 90°
180	filter: hue-rotate(180deg)	Putaran 180°

Contoh

<img visual="hue-rotate:90">Shifted hue</img>

Pratonton

Penapis Putaran Rona

visual="hue-rotate:90" - Putar rona warna

0°

90°

180°

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small">0°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:90">90°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small hue-rotate:180">180°</div>
</div>

Nilai Arbitrari

Sokong nilai tersuai menggunakan sintaks kurungan segi empat:

<div visual="filter:[custom-value]">Custom</div>