Comment faire pivoter une image en un clic à l'aide de CSS et JavaScript ?

Transformation CSS3 au clic à l'aide de CSS pur

Pour obtenir une rotation d'image au clic à l'aide de CSS pur, nous avons rencontré un défi où notre code existant pivote au survol. Concentrons-nous sur une solution CSS pure.

Solution :

CSS uniquement :

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

Cette solution utilise la pseudo-classe :active, qui déclenche la rotation en cliquant sur l'image. Cependant, la transformation ne persistera pas après le clic.

Pour une transformation persistante, nous devrons introduire JavaScript :

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

Ce code jQuery bascule la transformation en fonction de la valeur actuelle . Si la transformation est « aucune », elle applique la rotation de 45 degrés ; sinon, il supprime la transformation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!