CSS3-Transformation beim Klicken mit reinem CSS

Um die Benutzerinteraktion zu verbessern, müssen Sie möglicherweise ein Element beim Klicken mit CSS3 transformieren. Insbesondere das Drehen eines Bildes zum Erstellen eines Kreuzsymbols ist eine häufige Aufgabe. Während das Hovern ein häufiger Auslöser für eine Transformation ist, untersucht dieser Artikel die Möglichkeit, das onClick-Ereignis ausschließlich über CSS zu verwenden.

Zunächst nutzt der bereitgestellte Code das Hover-Ereignis, um das Bild um 45 Grad zu drehen. Um die Transformation jedoch beim Klicken auszulösen, ist eine Änderung erforderlich.

Active State Transformation

CSS bietet die :active-Pseudoklasse, die dazu dient, Elemente beim Klicken zu formatieren. Durch die Nutzung dieser Pseudoklasse können Sie das gewünschte Verhalten erreichen:

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

Dieser Code dreht das Bild um 45 Grad, wenn darauf geklickt wird. Es ist jedoch wichtig zu beachten, dass die Transformation verschwindet, sobald der Klick losgelassen wird. Dies liegt daran, dass der :active-Status nur während des Klicks selbst aktiv ist.

Transformation mit JavaScript beibehalten

Wenn Sie möchten, dass die Transformation nach dem Klick bestehen bleibt, müssen Sie JavaScript verwenden. Durch Erfassen des Klickereignisses mit jQuery können Sie die Transformation mit der css()-Methode umschalten:

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

In diesem Code wird die Transformationseigenschaft überprüft. Wenn es auf „Keine“ gesetzt ist, wird die Transformation angewendet, andernfalls wird sie entfernt. Dadurch können Sie das Kreuzsymbol bei jedem Klick ein- und ausschalten.

Durch die Verwendung dieser Techniken können Sie ein Bild mithilfe der CSS3-Transformation beim Klicken effektiv drehen, sowohl mit als auch ohne JavaScript, um die Transformation über den Klick hinaus aufrechtzuerhalten Ereignis.