Transición de CSS3 al hacer clic usando CSS puro

Estoy tratando de obtener una imagen (un símbolo más) para rotar 45 grados para crear un símbolo de cruz. Hasta ahora he logrado lograr esto usando el siguiente código pero está trabajando en el vuelo estacionario, quería que gire al hacer clic.

¿Hay una manera simple de hacerlo usando CSS ?

Mi código es:

CSS

img { display: block; margin: 20px; } .crossRotate { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } .crossRotate:hover { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } 

HTML

  Cross Menu button  

Aquí está la demostración jsfiddle .

Si quieres una solución de solo CSS, puedes usar active

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

Pero la transformación no persistirá cuando la actividad se mueva. Para eso necesitas javascript (jquery click y css es la OMI más limpia).

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

Violín

Método n. ° 1: CSS :focus pseudoclase

Como solución de CSS puro, puede lograr el tipo de efecto utilizando un atributo tabindex para la imagen y :focus tabindex de la siguiente manera:

  
 .crossRotate { outline: 0; /* other styles... */ } .crossRotate:focus { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } 

DEMO DE TRABAJO .

Nota: Al usar este enfoque, la imagen se gira haciendo clic (enfocado), para anular la rotación, deberá hacer clic en algún lugar fuera de la imagen (borroneada).

Método n. ° 2: Entrada oculta & :checked pseudoclase :checked

Este es uno de mis métodos favoritos. En este enfoque, hay una entrada de casilla oculta y un elemento que envuelve la imagen.

Una vez que hace clic en la imagen, la entrada oculta se marca porque se usa for atributo de la etiqueta.

Por lo tanto, utilizando la pseudo-clase :checked y el selector de hermanos adyacentes + , podríamos hacer rotar la imagen:

   
 #hacky-input { display: none; /* Hide the input */ } #hacky-input:checked + label img.crossRotate { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } 

DEMO DE TRABAJO # 1 .

DEMO DE TRABAJO # 2 (Aplicar la rotate a la etiqueta brinda una mejor experiencia) .

Método n. ° 3: alternar una clase a través de JavaScript

Si usa JavaScript / jQuery es una opción, puede alternar una clase .toggleClass() por .toggleClass() para activar el efecto de rotación, de la siguiente manera:

 $('.crossRotate').on('click', function(){ $(this).toggleClass('active'); }); 
 .crossRotate.active { /* vendor-prefixes here... */ transform: rotate(45deg); } 

DEMO DE TRABAJO .

También puede afectar diferentes elementos DOM utilizando : pseudo clase objective . Si un elemento es el destino de un objective de anclaje obtendrá el pseudo elemento de destino .

  Click me 

And I will change

Aquí hay un violín: https://jsfiddle.net/k86b81jv/

Como dijo jeremyjjbrow,: el pseudo :active no persistirá. Pero hay un truco para hacerlo en CSS puro. Puede envolverlo en una etiqueta y aplicar el :active en él, así:

  Cross Menu button  

Y el CSS:

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

Pruébalo … ¡Funciona (al menos en Chrome)!

Puede usar JavaScript para hacer esto, con el método onClick. Esto quizás ayude al evento click de transición de CSS3