HTML/CSS - Criando uma imagem rotativa

Hoje iremos ter mais um tutorial destinado ao aprendizado de HTML e neste artigo iremos aprender a fazer o efeito de imagem rotativa usando somente CSS, sem necessidade de javascript ou jQuery

Exemplos

estática

:hover

:hover + transição

:active (quando clicada + segurada)

HTML

<img src="url-da-imagem" alt="descrição da imagem" class="CLASSE CSS">
  </div>

Em CLASSE CSS ponha o nome do estilo listado logo abaixo que você vai querê-la (por exemplo: class="transformhover".

CSS

Estática (class="transform")

.transform{
transform: rotate(180deg);}

:hover (class="transformhover")

.transformhover:hover{
transform: rotate(180deg);}

:hover + transição (class="transformhoveranimacao")

.transformhoveranimacao{
-webkit-transition: -webkit-transform 2.0s;
-moz-transition: -moz-transform 2.0s;
-ms-transition: -ms-transform 2.0s;
-o-transition: -o-transform 2.0s;
transition: transform 2.0s}

.transformhoveranimacao:hover{
transform: rotate(180deg);}

:active (class="transformactive")

.transformactive{
-webkit-transition: -webkit-transform 2.0s;
-moz-transition: -moz-transform 2.0s;
-ms-transition: -ms-transform 2.0s;
-o-transition: -o-transform 2.0s;
transition: transform 2.0s}

.transformactive:active{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

Opa, mas quero a minha :active sem essa transição: só retirar o .transformactive{[...]} e deixar somente a .transformactive:active{[...]}

Propriedade	Descrição
180deg	Aqui você determina em quantos graus a imagem irá rodar (360deg = uma volta completa)
2.0s	duração da animação

PS: Você pode alterar o nome das classes, por exemplo: ".transformahover" pode ser "efeito180graus".