Bagaimana untuk Memutar Imej 45 Darjah pada Klik dengan CSS Tulen?

Transformasi CSS3 pada Klik: Pendekatan CSS Tulen

Dalam pembangunan web, mengubah elemen selalunya merupakan aspek penting untuk mencipta antara muka yang menarik dan berfungsi . Satu transformasi sedemikian yang boleh dicapai menggunakan CSS3 ialah putaran. Artikel ini meneroka cara menggunakan putaran 45 darjah pada imej (khususnya simbol tambah) apabila diklik, menggunakan CSS tulen.

Kod yang disediakan berjaya memutarkan imej pada tuding. Walau bagaimanapun, untuk mencapai gelagat yang diingini iaitu berputar pada klik, sedikit pengubahsuaian diperlukan.

Dalam CSS, kelas pseudo ':active' mewakili keadaan di mana unsur atau keturunannya sedang diklik atau diaktifkan. Dengan memanfaatkan kelas pseudo ini, kami boleh menambah peraturan CSS yang menggunakan penjelmaan putaran apabila mengklik imej.

<code class="css">.crossRotate:active {
   transform: rotate(45deg);
}</code>

Setelah melaksanakan peraturan ini, mengklik imej akan memutarkannya 45 darjah. Adalah penting untuk ambil perhatian bahawa transformasi ini bersifat sementara dan akan kembali kepada keadaan asalnya apabila klik dikeluarkan.

Untuk penyelesaian yang lebih kekal di mana transformasi berterusan melangkaui peristiwa klik, JavaScript boleh digabungkan. Menggunakan jQuery, seseorang boleh mencapai ini dengan menangkap acara klik dan menogol transformasi putaran dengan sewajarnya.

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

Coretan ini menogol transformasi putaran apabila imej diklik. Apabila imej berada dalam keadaan lalai, mengkliknya akan memutarkannya 45 darjah. Mengkliknya sekali lagi akan mengembalikannya ke kedudukan asalnya.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Imej 45 Darjah pada Klik dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!