Um efeito de rotação instantânea nas imagens pode tornar seu conteúdo mais envolvente e interativo. Neste tutorial, orientaremos você sobre como criar um efeito de rotação flutuante simples, mas atraente, usando apenas HTML e CSS.

Como criar o efeito

HTML:

Primeiro, adicione o seguinte código HTML:

Você pode adicionar qualquer imagem que desejar.

Este código configura uma imagem envolvida em uma tag com uma classe de hover-rotate.

CSS:

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}
.hover-rotate img {
  transition: all 0.3s;
  max-width: 100%;
}
.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Como funciona:

A tag

A classe .hover-rotate define as dimensões da imagem e oculta qualquer excesso. A classe .hover-rotate img lida com o efeito de transição suave.

Quando você passa o mouse sobre a imagem, ela aumenta 1,3 vezes e gira 5 graus, graças à propriedade transform.

Se você achou este tutorial útil, sinta-se à vontade para compartilhá-lo com outras pessoas ou deixar um comentário abaixo. Para mais dicas e truques sobre web design, não deixe de conferir nossos outros posts.

Visite meu site para mais tutoriais como este