cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk memutar imej dalam HTML?

Bagaimana untuk memutar imej dalam HTML?

WBOY
WBOYke hadapan
2023-09-01 09:37:061751semak imbas

如何在 HTML 中旋转图像？

Gambar merupakan bahagian penting dalam halaman web, dan kadangkala ia perlu diputar untuk menjadikannya kelihatan lebih baik atau sesuai dengan halaman web. Putaran imej dalam HTML adalah proses yang agak mudah dan boleh dicapai menggunakan CSS.

Proses menukar orientasi imej dari sudut tertentu dipanggil putaran imej. Sifat transformasi CSS ialah cara biasa dan mudah untuk memutar imej. Sifat ini digunakan untuk menggerakkan, memutar, menskala dan melakukan pelbagai transformasi elemen.

Tatabahasa

Berikut ialah sintaks untuk memutar imej dalam HTML - 

<style>
   transform: rotate(angle);
</style>

Di sini "sudut" ialah jumlah putaran yang digunakan pada elemen, dinyatakan dalam darjah.

Bagaimana untuk memutar imej dalam HTML?

Imej adalah bahagian penting dalam reka bentuk web kerana ia menambah daya tarikan visual tapak web dan memberikan maklumat kepada pengguna. Terdapat banyak cara untuk memutar imej dalam HTML, termasuk sifat transformasi CSS, kesan tuding dan animasi.

Di sini kita akan membincangkan kaedah ini satu persatu -

Gunakan sifat transformasi CSS

Atribut transform ialah kaedah yang paling biasa digunakan dalam CSS untuk memutar imej atau elemen. Fungsi rotate() digunakan untuk memutar elemen. Fungsi rotate() mengambil nilai darjah sebagai parameter untuk menentukan sudut putaran. Contohnya, untuk memutar imej 90 darjah, kita boleh menggunakan kod CSS berikut −

.my-img {
   transform: rotate(90deg);
}

Kod di atas akan memutarkan imej 90 darjah menggunakan sifat transformasi.

Contoh 1

Berikut ialah contoh kod lengkap untuk memutar imej 90 darjah menggunakan sifat transformasi CSS. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body{ text-align:center; }
      .my-img {
         transform: rotate(90deg);
         margin-top: 10px;
         padding: 5px;
         border: 5px solid #555;
      }
      img {
         margin-top: 5px;
         padding: 5px;
         border: 5px solid #555;
      }
   </style>
</head>
   <body>
      <h3>Normal Image</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" alt="Example Image">
      <h3>Rotated image by 90 degrees using css transform property</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

Gunakan kesan hover CSS

Untuk mencipta halaman web yang dinamik dan interaktif, kesan hover CSS ialah cara popular untuk memutar imej. Dalam CSS, kita boleh dengan mudah menambah kesan tuding yang menyebabkan imej berputar apabila pengguna menuding di atasnya. Untuk melakukan ini, kami menggunakan :hover pseudo-class dalam CSS. Berikut ialah contoh −

<style>
.img:hover {
   transform: rotate(60deg);
}
</style>

Dalam contoh di atas, kami menggunakan :hover kelas pseudo untuk menggunakan kesan putaran apabila pengguna menuding pada imej. Gunakan atribut transform untuk memutar imej 60 darjah.

Contoh 2

Berikut ialah contoh kod lengkap untuk memutar imej 60 darjah menggunakan :hover kelas pseudo. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      img{
         border: 5px solid #555;
         transition: transform 0.5s ease;
      }
      .my-img:hover {
         transform: rotate(60deg);
      }
   </style>
</head>
   <body>
      <h3>Hover me to rotate by 60 degrees</h3>
      <img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
   </body>
</html>

Gunakan animasi CSS

Memutar imej menggunakan animasi CSS ialah satu lagi cara untuk mencipta halaman web yang dinamik dan interaktif. Dalam CSS, kita boleh dengan mudah menambah animasi pada imej supaya ia berputar secara berterusan atau untuk tempoh tertentu. Untuk ini kita boleh menggunakan kod berikut. 

<style>
.my-img {
   border: 5px solid #555;
   margin-top: 20px;
   animation: rotation 4s infinite linear;
}
@keyframes rotation {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}
</style>

Dalam kod di atas, kami menggunakan sifat animasi untuk mencipta animasi putaran berulang secara berterusan. Peraturan @keyframes digunakan untuk menentukan animasi putaran. Kata kunci dari menetapkan titik permulaan animasi, dan kata kunci kepada menetapkan titik akhir.

Contoh 3

Ini adalah contoh kod lengkap untuk memutar imej dalam gelung menggunakan kaedah animasi CSS. 

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .my-img {
         border:5px solid #555;
         margin-top:20px;
         animation: rotation 4s infinite linear;
      }
      @keyframes rotation {
         from {
            transform: rotate(0deg);
         }
         to {
            transform: rotate(360deg);
         }
      }
   </style>
</head>
   <body>
      <h3>To rotate an image in a circular way using CSS</h3>
      <img src="/images/html.gif" class="my-img"></div>
   </body>
</html>

Kesimpulan

Memutar imej menggunakan HTML ialah cara terbaik untuk menambah minat visual pada halaman web anda. Dengan contoh di atas, kita dapat melihat betapa mudahnya untuk memutar imej menggunakan kaedah yang berbeza seperti darjah, kesan tuding dan animasi.

Atas ialah kandungan terperinci Bagaimana untuk memutar imej dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 循环 伪类 transform animation
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat segitiga dalam CSS?Artikel seterusnya：Bagaimana untuk membuat segitiga dalam CSS?

Artikel berkaitan

Lihat lagi