Transformación CSS3 al hacer clic usando CSS puro

En un esfuerzo por mejorar la interacción del usuario, es posible que encuentre la necesidad de transformar un elemento al hacer clic usando CSS3. Específicamente, rotar una imagen para crear un símbolo de cruz es una tarea común. Si bien el desplazamiento es un desencadenante común de la transformación, este artículo explora la posibilidad de utilizar el evento onClick exclusivamente a través de CSS.

Inicialmente, el código proporcionado utiliza el evento de desplazamiento para rotar la imagen 45 grados. Sin embargo, para activar la transformación al hacer clic, se requiere una modificación.

Transformación de estado activo

CSS ofrece la pseudoclase :active que está diseñada para diseñar elementos cuando se hace clic en ellos. Al aprovechar esta pseudoclase, puede lograr el comportamiento deseado:

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

Este código rotará la imagen 45 grados cuando se haga clic en él. Sin embargo, es importante tener en cuenta que la transformación desaparecerá una vez que se suelte el clic. Esto se debe a que el estado :activo solo está activo durante el clic en sí.

Preservar la transformación con JavaScript

Si desea que la transformación persista después del clic, deberá emplear JavaScript. Al capturar el evento de clic usando jQuery, puede alternar la transformación usando el método css():

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

En este código, la propiedad de transformación está marcada. Si se establece en ninguno, se aplica la transformación; de lo contrario, se elimina. Esto le permite activar y desactivar el símbolo de cruz con cada clic.

Al utilizar estas técnicas, puede rotar efectivamente una imagen usando la transformación CSS3 al hacer clic, tanto con como sin JavaScript para mantener la transformación más allá del clic. evento.