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
HTML
CSS
Estática (class="transform")
:hover (class="transformhover")
:hover + transição (class="transformhoveranimacao")
:active (class="transformactive")
PS: Você pode alterar o nome das classes, por exemplo: ".transformahover" pode ser "efeito180graus".
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".