Efeito de Rotação de Imagem Cativante com CSS

Introdução

Neste laboratório, aprenderemos como criar um efeito de hover (passar o mouse) que rotaciona uma imagem usando propriedades CSS. Ao usar scale(), rotate() e transition, podemos fazer com que a imagem pareça rotacionar quando o usuário passa o mouse sobre o elemento pai. Também usaremos overflow: hidden para ocultar o excesso da transformação da imagem, criando um efeito limpo e polido.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 91%. Recebeu uma taxa de avaliações positivas de 88% dos estudantes.

Rotação de Imagem ao Passar o Mouse (Hover)

index.html e style.css já foram fornecidos na VM.

Para criar um efeito de rotação para uma imagem ao passar o mouse (hover), use as propriedades scale(), rotate() e transition ao passar o mouse sobre o elemento pai, que deve ser um elemento <figure>. Para garantir que a transformação da imagem não transborde do elemento pai, adicione overflow: hidden ao CSS do elemento pai. Aqui está um exemplo de código HTML e CSS:

<figure class="hover-rotate">
  <img src="https://picsum.photos/id/669/600/800.jpg" />
</figure>

.hover-rotate {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.hover-rotate img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.hover-rotate:hover img {
  transform: scale(1.3) rotate(5deg);
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório de Rotação de Imagem ao Passar o Mouse (Hover). Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.