Efeitos animados CSS #1 - Girar 360º

Fala galera, depois de um tempo, venho com esse tutorial começar uma série de aulas que ensinarão vários efeitos animados que o CSS nos proporciona! Espero que gostem!

Para iniciar, o primeiro efeito vai ser o de rotação! Ele faz com que as imagem ou qualquer elemento dê uma volta completa em si mesmo.

Veja um exemplo passando o mouse em cima de um dos ícones das redes sociais aqui em cima.

1 - Criar os elementos - HTML

Primeiramente, precisamos criar o elemento em que o efeito será aplicado. Este pode ser uma imagem, uma div, um texto, um link, não importa...O importante é que você tenha como referenciá-los no CSS, ou seja, que eles tenham um id ou class...

2 - Código CSS

E aqui segue o código CSS: 

img{
/* transições (animações)*/
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;

/*qualidade da imagem*/
image-rendering: optimizeQuality;
}
img:hover{
/*rotação*/
-moz-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
-webkit-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
-o-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
-ms-transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);
transform: scale(1.1) rotate(360deg) translateX(1px) translateY(1px) skewX(1deg) skewY(1deg);

}

Você pode escolher o evento que chamará o efeito. No meu caso será quando o mouse passar em cima (:hover) , mas pode ser o :focus, o :blur etc. Você também pode interagir com jquery !

Espero que tenham gostado! Qualquer dúvida ou sugestão, comente aqui em baixo! Muito obrigado!

Compartilhem!

Compartilhe essa postagem!