LabEx
EntrerRejoindre

Rotation d'image au survol

Beginner

This tutorial is from open-source community. Access the source code

Introduction

Dans ce laboratoire, nous allons apprendre à créer un effet de survol qui fait tourner une image à l'aide de propriétés CSS. En utilisant scale(), rotate() et transition, nous pouvons faire apparaître l'image comme si elle tournait lorsque l'utilisateur survole l'élément parent. Nous utiliserons également overflow: hidden pour cacher l'excès de la transformation de l'image, créant un effet propre et soigné.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 91%. Il a reçu un taux d'avis positifs de 88% de la part des apprenants.

Image Rotate on Hover

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer un effet de rotation pour une image au survol, utilisez les propriétés scale(), rotate() et transition lorsque vous survolez l'élément parent, qui devrait être un élément <figure>. Pour vous assurer que la transformation de l'image ne déborde pas de l'élément parent, ajoutez overflow: hidden à la feuille de style CSS de l'élément parent. Voici un exemple de code HTML et 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);
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire Image Rotate on Hover. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.