Bagaimanakah saya boleh memutarkan imej 45 darjah pada klik hanya menggunakan CSS?

Imej Animasikan CSS3 pada Klik Menggunakan CSS Tulen

Dalam artikel ini, kita akan meneroka cara memutar imej 45 darjah pada klik menggunakan CSS tulen, tanpa bergantung pada JavaScript.

Kod Awal

Anda telah menyediakan CSS berikut:

<code class="css">img {
    display: block;
    margin: 20px;
}

.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

.crossRotate:hover {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     transform: rotate(45deg);
}</code>

Kod ini menghidupkan putaran pada masa ini pada tuding, tetapi ia tidak bertindak balas kepada klik.

Penyelesaian CSS Sahaja

Untuk mencapai penggiliran pada klik menggunakan CSS tulen, anda boleh menggunakan pemilih :aktif . Begini rupa CSS anda yang diperbetulkan:

<code class="css">.crossRotate {
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
     transition-duration: 1s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;
}

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

Kini, apabila anda mengklik imej, ia akan berputar 45 darjah. Walau bagaimanapun, ia akan kekal diputar selepas melepaskan klik. Jika anda mahu imej kembali kepada keadaan asalnya selepas setiap klik, anda perlu menggunakan JavaScript.

JavaScript Solution

Menggunakan JavaScript, anda boleh menogol putaran pada klik seperti berikut:

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

Kod ini menyemak perubahan semasa imej. Jika "tiada", ini bermakna imej tidak diputar, jadi ia memutarkannya sebanyak 45 darjah. Jika bukan "tiada", ia menetapkan semula transformasi, mengembalikan imej kepada keadaan asalnya.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memutarkan imej 45 darjah pada klik hanya menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!