Maison > Article > interface Web > Comment faire pivoter une image en un clic à l'aide de CSS et JavaScript ?
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!