HTML, CSS et jQuery : conseils pour obtenir des effets de retournement d'image

HTML, CSS et jQuery : Conseils pour réaliser des effets de retournement d'image

Dans la conception Web moderne, afin d'augmenter l'interactivité et l'attractivité de la page, certains effets spéciaux sont souvent ajoutés pour améliorer l'expérience utilisateur. Parmi eux, l'effet de retournement d'image est un effet courant et accrocheur qui peut rendre les images statiques vives et intéressantes.

Dans cet article, nous présenterons comment utiliser HTML, CSS et jQuery pour implémenter des effets de retournement d'image et fournirons des exemples de code spécifiques pour référence aux lecteurs.

1. Préparation

Tout d'abord, nous devons préparer du matériel d'images et créer un conteneur pour eux.

<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
    </div>
    <div class="back">
      <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
    </div>
  </div>
</div>

Dans le code ci-dessus, nous avons créé un div nommé flip-container comme conteneur d'emballage, et y avons créé deux div : flipper et front et back. Flipper est chargé de contrôler l'effet de retournement, tandis que l'avant et l'arrière sont utilisés pour accueillir les images qui doivent être retournées.

2.Paramètres de style CSS

Ensuite, nous devons ajouter des styles CSS à ces éléments pour obtenir l'effet flip.

.flip-container {
  perspective: 1000px;
  width: 200px;
  /* 设置适当的宽度和高度 */
  height: 200px;
}

.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  transform-origin: 50% 50%;
  /* 根据需要调整翻转速度和翻转位置 */
  width: 200px;
  height: 200px;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  z-index: 1;
  /* 设置适当的背景颜色或样式 */
  background-color: #fff;
}

.back {
  transform: rotateY(180deg);
  /* 设置需要翻转的图像 */
}

.flip-container:hover .flipper {
  transform: rotateY(180deg);
}

Dans le code ci-dessus, nous définissons d'abord l'attribut perspective pour flip-container afin de fournir un effet de perspective et d'augmenter le réalisme. Ensuite, nous définissons diverses propriétés CSS de flipper pour prendre en charge l'effet de retournement 3D. Les éléments recto et verso sont utilisés respectivement pour afficher les images recto et verso et masquer les éléments verso grâce à l'attribut backface-visibility.

3. Script jQuery pour obtenir des effets d'animation

Enfin, nous utilisons jQuery pour créer des effets d'animation afin que l'image puisse être retournée lorsque la souris est survolée.

$(document).ready(function() {
  $('.flip-container').hover(function() {
    $(this).find('.flipper').addClass('flip');
  }, function() {
    $(this).find('.flipper').removeClass('flip');
  });
});

Dans le code ci-dessus, nous utilisons la fonction .hover() pour ajouter un événement de survol de la souris au .flip-container. Lorsque la souris passe sur le conteneur, jQuery ajoutera dynamiquement la classe .flip pour déclencher l'effet flip en CSS. Lorsque la souris quitte le conteneur, jQuery supprimera la classe .flip pour obtenir l'effet de restauration de l'élément.

Résumé

Grâce à la combinaison de HTML, CSS et jQuery, nous pouvons facilement obtenir des effets de retournement d'image. En ajustant diverses propriétés en CSS, nous pouvons obtenir des effets de retournement avec différents styles et effets. L'utilisation de jQuery pour gérer les événements de souris peut encore améliorer l'expérience d'interaction utilisateur.

J'espère que les conseils et les exemples de code fournis dans cet article seront utiles aux lecteurs, rendant plus facile et plus agréable la mise en œuvre d'effets de retournement d'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!