Transição CSS3 ao clicar usando CSS puro

Eu estou tentando obter uma imagem (um símbolo de mais) para girar 45 graus para criar um símbolo de cruz. Eu até agora consegui isso usando o código abaixo, mas o seu trabalho em foco, eu queria girá-lo em clique.

Existe uma maneira simples de fazer isso usando CSS ?

Meu código é:

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  

Aqui está a demonstração jsfiddle .

    Se você quiser uma solução única css você pode usar ativo

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

    Mas a transformação não persistirá quando a atividade se mover. Para isso você precisa de javascript (jquery click e css é o mais limpo IMO).

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

    Violino

    Método 1: CSS :focus pseudo-class de :focus

    Como pura solução CSS, você poderia obter uma espécie de efeito usando um atributo tabindex para a imagem e :focus pseudo-class da seguinte forma:

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

    DEMONSTRAÇÃO DE TRABALHO

    Nota: Usando esta abordagem, a imagem é rotacionada onclick (focada), para negar a rotação, você precisará clicar em algum lugar fora da imagem (blured).

    Método # 2: Entrada oculta e :checked pseudo-class :checked

    Este é um dos meus methods favoritos. Nesta abordagem, há uma input de checkbox de seleção oculta e um elemento que envolve a imagem.

    Depois de clicar na imagem, a input oculta é verificada devido ao uso for atributo para o label.

    Assim, usando a pseudo-class :checked e o seletor irmão adjacente + , poderíamos fazer com que a imagem fosse girada:

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

    DEMONSTRAÇÃO DE TRABALHO # 1 .

    DEMONSTRAÇÃO DE TRABALHO # 2 (Aplicar a rotate na etiqueta proporciona uma experiência melhor) .

    Método # 3: alternando uma class via JavaScript

    Se usar JavaScript / jQuery for uma opção, você poderá alternar uma class .toggleClass() por .toggleClass() para acionar o efeito de rotação, da seguinte maneira:

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

    DEMONSTRAÇÃO DE TRABALHO

    Você também pode afetar elementos DOM diferentes usando : pseudo class de destino . Se um elemento for o destino de um destino de âncora, ele obterá o elemento pseudo : target .

      Click me 

    And I will change

    Aqui está um violino: https://jsfiddle.net/k86b81jv/

    Como jeremyjjbrow disse :active pseudo :active não persistirá. Mas há um hack para fazer isso em css puro. Você pode envolvê-lo em uma tag e aplicar o :active nele, assim:

      Cross Menu button  

    E o css:

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

    Experimente … Funciona (pelo menos no Chrome)!

    Você pode usar JavaScript para fazer isso, com o método onClick. Isso talvez ajude o evento de clique de transição CSS3