Cara memutar gambar dengan CSS dan HTML

Cara memutar gambar dengan CSS dan HTML

Memutar gambar di halaman web dimungkinkan menggunakan kelas rotasi CSS, yang ditambahkan ke tag apa pun untuk memutar gambar.

Gambar yang diputar

Memutar gambar menggunakan CSS

Kode CSS perlu menyertakan kode transformasi untuk setiap browser Internet utama, sehingga gambar diputar di semua browser.

Di bawah ini adalah contoh kode CSS untuk memutar gambar 180 derajat.

.rotateimg180 {
  -webkit-transform:rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

Kode CSS di atas harus ditambahkan ke file stylesheet .css yang ditautkan ke HTML Anda. Misalnya, jika file CSS Anda diberi nama site.css dan dalam direktori yang sama dengan file HTML Anda, Anda dapat menyertakan HTML berikut di elemen:

Cara lainnya, Anda dapat memasukkan kode CSS sebaris, baik dalam tag gaya yang muncul sebelum tag gambar, atau di gaya atribut dari tag gambar.

Setelah kode CSS diterapkan ke file .css, stylesheet, atau tag