Rumah > hujung hadapan web > tutorial css > Bagaimanakah saya boleh Memutar Imej pada Klik menggunakan Transformasi CSS3?

Bagaimanakah saya boleh Memutar Imej pada Klik menggunakan Transformasi CSS3?

Mary-Kate Olsen
Lepaskan: 2024-10-29 08:02:02
asal
595 orang telah melayarinya

How can I Rotate an Image on Click using CSS3 Transform?

Transformasi CSS3 pada Klik menggunakan CSS Tulen

Dalam usaha untuk meningkatkan interaksi pengguna, anda mungkin menghadapi keperluan untuk mengubah elemen apabila klik menggunakan CSS3. Khususnya, memutar imej untuk mencipta simbol silang adalah tugas biasa. Walaupun menuding adalah pencetus biasa untuk transformasi, artikel ini meneroka kemungkinan menggunakan acara onClick secara eksklusif melalui CSS.

Pada mulanya, kod yang disediakan menggunakan acara tuding untuk memutarkan imej sebanyak 45 darjah. Walau bagaimanapun, untuk mencetuskan transformasi pada klik, pengubahsuaian diperlukan.

Transformasi Keadaan Aktif

CSS menawarkan :kelas pseudo aktif yang direka bentuk untuk menggayakan elemen apabila ia diklik. Dengan memanfaatkan kelas pseudo ini, anda boleh mencapai gelagat yang diingini:

<code class="css">.crossRotate:active {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}</code>
Salin selepas log masuk

Kod ini akan memutarkan imej 45 darjah apabila ia diklik. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa transformasi akan lenyap setelah klik dikeluarkan. Ini kerana keadaan :active hanya aktif semasa klik itu sendiri.

Memelihara Transformasi dengan JavaScript

Jika anda mahu transformasi berterusan selepas klik, anda perlu menggunakan JavaScript. Dengan menangkap acara klik menggunakan jQuery, anda boleh menogol transformasi menggunakan kaedah css():

<code class="javascript">$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});</code>
Salin selepas log masuk

Dalam kod ini, sifat transformasi ditandakan. Jika ia ditetapkan kepada tiada, transformasi akan digunakan, jika tidak ia dialih keluar. Ini membolehkan anda menghidupkan dan mematikan simbol pangkah dengan setiap klik.

Dengan menggunakan teknik ini, anda boleh memutarkan imej dengan berkesan menggunakan transformasi CSS3 pada klik, dengan dan tanpa JavaScript untuk mengekalkan transformasi di luar klik acara.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Memutar Imej pada Klik menggunakan Transformasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan