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

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

0 0

Quote

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

removido
(usa Nenhuma)

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>