Comment faire pivoter une image de 45 degrés en un clic avec Pure CSS ?

Transformation CSS3 au clic : une approche CSS pure

Dans le développement Web, la transformation des éléments est souvent un aspect crucial pour créer des interfaces attrayantes et fonctionnelles . L'une de ces transformations pouvant être réalisée à l'aide de CSS3 est la rotation. Cet article explique comment appliquer une rotation de 45 degrés à une image (en particulier un symbole plus) lors d'un clic, en utilisant du CSS pur.

Le code fourni fait pivoter l'image avec succès en survol. Cependant, pour obtenir le comportement souhaité de rotation au clic, une légère modification est nécessaire.

En CSS, la pseudo-classe ':active' représente l'état dans lequel un élément ou ses descendants sont cliqués ou activés. En tirant parti de cette pseudo-classe, nous pouvons ajouter une règle CSS qui applique la transformation de rotation en cliquant sur l'image.

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

Lors de la mise en œuvre de cette règle, cliquer sur l'image la fera pivoter de 45 degrés. Il est important de noter que cette transformation est temporaire et reviendra à son état d'origine lorsque le clic sera relâché.

Pour une solution plus permanente où la transformation persiste au-delà de l'événement de clic, JavaScript peut être incorporé. En utilisant jQuery, on peut y parvenir en capturant l'événement de clic et en basculant la transformation de rotation en conséquence.

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

Cet extrait de code active la transformation de rotation lorsque l'on clique sur l'image. Lorsque l'image est dans son état par défaut, cliquer dessus la fera pivoter de 45 degrés. Cliquez à nouveau dessus pour le ramener à sa position 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!