Transformation CSS3 au clic à l'aide de Pure CSS

Dans le but d'améliorer l'interaction de l'utilisateur, vous devrez peut-être 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 requise.

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

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

Ce code fera pivoter l'image de 45 degrés lorsque vous cliquez 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() :

$( ".crossRotate" ).click(function() {
  if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(45deg)");
  } else {
    $(this).css("transform","" );
  }
});

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