Como fazer uma imagem girar em sentido horário, apenas quando o mouse está sobre ela

1. Como fazer uma imagem girar em sentido horário, apenas quando o mouse está sobre ela

Alisson Bomfim
RewelB

(usa Ubuntu)

Enviado em 22/08/2019 - 13:23h

Seguinte: preciso saber como fazer uma imagem girar em sentido horário, apenas enquanto o cursor está sobre ela. Para melhor exemplificar, eu gostaria que ela girasse de uma maneira semelhante a engrenagem desse site: http://www.empsis.com.br


  


2. Re: Como fazer uma imagem girar em sentido horário, apenas quando o mouse está sobre ela

Ruan
ru4n

(usa Fedora)

Enviado em 22/08/2019 - 14:28h

Segue CSS:
https://stackoverflow.com/questions/16771225/css3-rotate-animation

Aqui fiz um exemplo usando addEventListener e deu certo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.image {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
<title>Document</title>
</head>
<body>
<img id="img1" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120" />
</body>
<script>
var img = document.getElementById('img1');

img.addEventListener("mouseover", function() {
img.classList.add('image');
});
img.addEventListener("mouseout", function() {
img.classList.remove('image');
});
</script>
</html>







Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts