Rekomendasi Kursus:

Fungsi hue-rotate() CSS

Definisi dan penggunaan CSS hue-rotate() Fungsi penyaringan meng aplikasikan putar warna bagi elemen.

Contoh

Contoh 1

Atur penataan warna yang berbeda untuk gambar:

#img1 {
  filter: hue-rotate(200deg);
}
#img2 {
  filter: hue-rotate(90deg);
}
#img3 {
  filter: hue-rotate(-90deg);
}

Coba sendiri

Contoh 2

untuk hue-rotate() dengan backdrop-filter Gabungkan properti:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: hue-rotate(90deg);
  backdrop-filter: hue-rotate(90deg);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

Coba sendiri

Syntaks CSS

hue-rotate(angle)
Nilai Deskripsi
angle

Opsional. Tentukan suatu sudut untuk menunjukkan perubahan relatif warna sampel masukan.

Nilai positif akan menambah nilai warna, sementara nilai negatif akan mengurangi nilai warna.

0deg berarti gambar asli (tanpa efek).

Nilai standar adalah 0.

Detil Teknologi

Versi: Modul Efek Penyaringan CSS Level 1

Dukungan Browser

Angka di tabel menunjukkan versi browser yang mendukung penuh fungsi ini.

Chrome Edge Firefox Safari Opera
18 12 35 6 15

Halaman yang berhubungan

Referensi:Atribut filter CSS

Referensi:Fungsi CSS blur()

Referensi:Fungsi CSS brightness()

Referensi:Fungsi CSS contrast()

Referensi:Fungsi CSS drop-shadow()

Referensi:Fungsi CSS grayscale()

Referensi:Fungsi CSS invert()

Referensi:Fungsi opacity() CSS

Referensi:Fungsi saturate() CSS

Referensi:Fungsi sepia() CSS