Rotacionar elementos com CSS
Fala Galera, tudo beleza?
Hoje gostaria de compartilhar com vocês, um efeito bacana que podemos fazer em Imagens, Divs, textos e etc, utilizando apenas CSS!!
Primeiramente crie o elemento que você queira aplicar este efeito, como exemplo vou utilizar o nosso Logo.
Com o código CSS abaixo, podemos aplicar o efeito de rotação quando passamos o mouse sobre a imagem (:hover, :blur, :focus e etc).
|
1 2 3 4 5 6 |
.rodarImagem img:hover{ /* dentro dos parenteses você insere o grau de rotação da imagem!*/ -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } |
Exemplo:
Se quiser administrar o tempo que o elemento vai levar para completar a rotação, adicione o código abaixo:
|
1 2 3 4 5 6 7 |
.rodarImagem img{ /*você pode alterar a velocidade para milisegundos (ms) caso queira agilizar a rotação!*/ webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; } |
Exemplo:
Espero que tenham gostado deste post! Deixe seu comentário abaixo em caso de duvidas ou sugestões!
Abraços!