CSS3 Transform on Click usando Pure CSS

Em um esforço para melhorar a interação do usuário, você pode encontrar a necessidade de transformar um elemento ao clicar usando CSS3. Especificamente, girar uma imagem para criar um símbolo de cruz é uma tarefa comum. Embora pairar seja um gatilho comum para transformação, este artigo explora a possibilidade de usar o evento onClick exclusivamente por meio de CSS.

Inicialmente, o código fornecido utiliza o evento hover para girar a imagem em 45 graus. No entanto, para acionar a transformação ao clicar, uma modificação é necessária.

Active State Transformation

CSS oferece a pseudoclasse :active que é projetada para estilizar elementos quando eles estão sendo clicados. Ao aproveitar esta pseudoclasse, você pode obter o comportamento desejado:

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

Este código girará a imagem 45 graus quando for clicado. No entanto, é importante observar que a transformação desaparecerá assim que o clique for liberado. Isso ocorre porque o estado :active só está ativo durante o clique em si.

Preservando a transformação com JavaScript

Se quiser que a transformação persista após o clique, você precisará empregar JavaScript. Ao capturar o evento click usando jQuery, você pode alternar a transformação usando o método css():

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

Neste código, a propriedade transform está marcada. Se estiver definido como nenhum, a transformação será aplicada, caso contrário, será removida. Isso permite que você ative e desative o símbolo da cruz a cada clique.

Ao utilizar essas técnicas, você pode girar efetivamente uma imagem usando a transformação CSS3 ao clicar, com e sem JavaScript para manter a transformação além do clique evento.