Comment puis-je faire pivoter une image en un clic à l'aide de la transformation CSS3 ?

Transformation CSS3 au clic à l'aide de Pure CSS

Dans le but d'améliorer l'interaction de l'utilisateur, vous pouvez rencontrer le besoin de transformer un élément lors d'un clic à l'aide de CSS3. Plus précisément, faire pivoter une image pour créer un symbole de croix est une tâche courante. Bien que le survol soit un déclencheur courant de transformation, cet article explore la possibilité d'utiliser l'événement onClick exclusivement via CSS.

Initialement, le code fourni utilise l'événement survol pour faire pivoter l'image de 45 degrés. Cependant, pour déclencher la transformation au clic, une modification est nécessaire.

Active State Transformation

CSS propose la pseudo-classe :active qui est conçue pour styliser les éléments lorsqu'ils sont cliqués. En tirant parti de cette pseudo-classe, vous pouvez obtenir le comportement souhaité :

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

Ce code fera pivoter l'image de 45 degrés lorsqu'on clique dessus. Cependant, il est important de noter que la transformation disparaîtra une fois le clic relâché. En effet, l'état :active n'est actif que pendant le clic lui-même.

Préserver la transformation avec JavaScript

Si vous souhaitez que la transformation persiste après le clic, vous devrez utiliser JavaScript. En capturant l'événement click à l'aide de jQuery, vous pouvez basculer la transformation à l'aide de la méthode css() :

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

Dans ce code, la propriété transform est vérifiée. S'il est défini sur aucun, la transformation est appliquée, sinon elle est supprimée. Cela vous permet d'activer et de désactiver le symbole de la croix à chaque clic.

En utilisant ces techniques, vous pouvez faire pivoter efficacement une image à l'aide de la transformation CSS3 au clic, avec et sans JavaScript pour maintenir la transformation au-delà du clic. événement.

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!