Bagaimana untuk Memutar Imej pada Klik Menggunakan CSS dan JavaScript?

Transformasi CSS3 pada Klik Menggunakan CSS Tulen

Untuk mencapai penggiliran imej pada klik menggunakan CSS tulen, kami telah menghadapi cabaran apabila kod sedia ada kami berputar pada tuding. Mari fokus pada penyelesaian CSS tulen.

Penyelesaian:

CSS sahaja:

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

Penyelesaian ini menggunakan kelas pseudo :aktif, yang mencetuskan putaran apabila mengklik imej. Walau bagaimanapun, transformasi tidak akan berterusan selepas klik.

Untuk transformasi yang berterusan, kami perlu memperkenalkan JavaScript:

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

Kod jQuery ini menogol transformasi berdasarkan nilai semasa . Jika transformasi adalah 'tiada', ia menggunakan putaran 45 darjah; jika tidak, ia menghilangkan transformasi.

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