Bagaimanakah saya boleh Memutar Imej pada Klik menggunakan Transformasi CSS3?

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>

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>

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!