Rotação de imagem ativada por foco

A incorporação de comportamento dinâmico em suas páginas da web, como rotações de imagem ao passar o mouse, pode aumentar o envolvimento do usuário. Para conseguir esse efeito com CSS em uma imagem com borda circular, siga estes passos:

1. Transições CSS3 com rotate()

Utilize transições CSS3 para girar suavemente a imagem ao passar o mouse. A propriedade de transição define a duração e a função de atenuação da animação. Nesse caso, definimos a duração da transição para 0,7 segundos e especificamos uma função de atenuação de entrada e saída.

img {
  transition: transform .7s ease-in-out;
}

2. Transformação Hover

Para girar a imagem ao passar o mouse, usamos a propriedade transform com a função rotate() para definir o ângulo de rotação desejado. Neste exemplo, giramos a imagem 360 graus.

img:hover {
  transform: rotate(360deg);
}

3. Implementação HTML

No seu código HTML, coloque um elemento de imagem com a fonte e o tamanho apropriados.

Código de amostra

Aqui está um exemplo de código completo demonstrando a imagem giratória efeito:

img {
  border-radius: 50%;
  transition: transform .7s ease-in-out;
}

img:hover {
  transform: rotate(360deg);
}

Com este código, sempre que o usuário passar o mouse sobre o imagem, ela girará 360 graus suavemente.