Comment puis-je faire pivoter une image de 45 degrés en un clic en utilisant uniquement CSS ?

Animation d'image CSS3 lors d'un clic à l'aide de CSS pur

Dans cet article, nous explorerons comment faire pivoter une image de 45 degrés lors d'un clic à l'aide CSS pur, sans recourir à JavaScript.

Code initial

Vous avez fourni le CSS suivant :

<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>

Ce code anime actuellement la rotation au survol, mais il ne répond pas aux clics.

Solution CSS uniquement

Pour réaliser la rotation au clic en utilisant du CSS pur, vous pouvez utiliser le sélecteur :active . Voici à quoi devrait ressembler votre CSS corrigé :

<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>

Maintenant, lorsque vous cliquez sur l'image, elle pivote de 45 degrés. Cependant, il restera tourné après avoir relâché le clic. Si vous souhaitez que l'image revienne à son état d'origine après chaque clic, vous devrez utiliser JavaScript.

Solution JavaScript

À l'aide de JavaScript, vous pouvez activer ou désactiver l'option rotation au clic comme suit :

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

Ce code vérifie la transformation en cours de l'image. Si c'est « aucun », cela signifie que l'image n'est pas pivotée, elle la fait donc pivoter de 45 degrés. Si ce n'est pas « aucun », il réinitialise la transformation, ramenant l'image à son état d'origine.

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!