CSS3-Transformation per Klick: Ein reiner CSS-Ansatz
In der Webentwicklung ist die Transformation von Elementen oft ein entscheidender Aspekt für die Erstellung ansprechender und funktionaler Schnittstellen . Eine solche Transformation, die mit CSS3 erreicht werden kann, ist die Rotation. In diesem Artikel wird erläutert, wie Sie beim Klicken mithilfe von reinem CSS eine 45-Grad-Drehung auf ein Bild (insbesondere ein Pluszeichen) anwenden können.
Der bereitgestellte Code dreht das Bild beim Schweben erfolgreich. Um jedoch das gewünschte Verhalten der Drehung beim Klicken zu erreichen, ist eine geringfügige Änderung erforderlich.
In CSS stellt die Pseudoklasse „:active“ den Zustand dar, in dem ein Element oder seine Nachkommen angeklickt oder aktiviert werden. Durch die Nutzung dieser Pseudoklasse können wir eine CSS-Regel hinzufügen, die die Rotationstransformation beim Klicken auf das Bild anwendet.
<code class="css">.crossRotate:active {
transform: rotate(45deg);
}</code>Bei der Implementierung dieser Regel wird das Bild durch Klicken auf das Bild um 45 Grad gedreht. Es ist wichtig zu beachten, dass diese Transformation vorübergehend ist und in ihren ursprünglichen Zustand zurückkehrt, wenn der Klick losgelassen wird.
Für eine dauerhaftere Lösung, bei der die Transformation über das Klickereignis hinaus bestehen bleibt, kann JavaScript integriert werden. Mit jQuery kann man dies erreichen, indem man das Klickereignis erfasst und die Rotationstransformation entsprechend umschaltet.
<code class="javascript">$( ".crossRotate" ).click(function() {
if ( $( this ).css( "transform" ) == 'none' ){
$(this).css("transform","rotate(45deg)");
} else {
$(this).css("transform","" );
}
});</code>Dieses Snippet schaltet die Rotationstransformation um, wenn auf das Bild geklickt wird. Wenn sich das Bild im Standardzustand befindet, wird es durch Klicken um 45 Grad gedreht. Durch erneutes Klicken wird es an seine ursprüngliche Position zurückgesetzt.
Das obige ist der detaillierte Inhalt vonWie drehe ich ein Bild per Klick um 45 Grad mit reinem CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
