Comment créer un effet de pliage d'image en utilisant HTML et CSS ?

À l’ère numérique d’aujourd’hui, la création d’interfaces utilisateur interactives visuellement attrayantes est devenue un aspect important de la conception Web. L’un des effets populaires utilisés sur les sites Web modernes est l’effet de pli d’image. Cet effet offre une manière unique et attrayante d’afficher des images sur votre site Web. L’art des effets de pliage d’images peut être créé grâce à l’application de HTML et CSS, qui sont des éléments fondamentaux de l’architecture numérique contemporaine. Dans cet article, nous vous guiderons dans la création d'un résultat de pliage d'image pièce par pièce en utilisant HTML et CSS. Après avoir lu cet article, vous comprendrez parfaitement comment obtenir cet effet et faire ressortir votre site Web.

Propriétés de conversion

La propriété transform en CSS est utilisée pour apporter des modifications à la forme, à la position ou à la taille des éléments HTML. Il permet aux ingénieurs logiciels de modifier la disposition, la rotation, la torsion, la taille et d'autres caractéristiques optiques des composants. La transformation est réalisée à l'aide d'opérations de déformation 2D et 3D telles que le transfert, la rotation, l'inclinaison et l'amplitude. Les propriétés de transition fonctionnent de manière transparente avec tous les derniers navigateurs Web et peuvent être utilisées pour générer des composants visuels dynamiques et animés qui déclenchent l'engagement et l'interaction des utilisateurs. Le composant transformé conserve sa taille, son contour et sa position inhérents, et les autres composants adjacents s'adaptent au composant transformé. C'est un excellent moyen de travailler avec des éléments d'une page Web sans affecter la disposition des autres éléments de la page.

Grammaire

transform: [function] [value];

Fonction peut être l'un des éléments suivants&miinus;

• translate() - Déplace un élément le long des axes x et y.

• rotate() - Fait pivoter un élément autour de son origine.

• scale() - Augmente ou diminue la taille d'un élément.

• skew() - Tordez un élément le long de l'axe x ou y.

• matrix() - Combine plusieurs transformations en une seule transformation.

Valeur dépend de la fonctionnalité spécifique que vous utilisez. A titre d'illustration, si vous choisissez d'appliquer la fonction Translate(), cette valeur peut être exprimée sous la forme Translate(x, y), où les valeurs numériques de x et y représentent le nombre de pixels nécessaires pour déplacer l'élément dans son emplacement. direction. Axe horizontal et axe vertical.

 :Nième sous-sélecteur

Le sélecteur CSS appelé :nth-child est utilisé pour sélectionner des éléments en fonction de leur position ordinale parmi les éléments ancêtres. Il vous permet d'identifier un composant juvénile spécifique contenu dans un composant ascendant et d'attacher des attributs stylistiques à ce composant juvénile. L'identifiant :nth-child utilise un algorithme pour déterminer quels composants enfants doivent être sélectionnés. Par exemple, vous pouvez utiliser :nth-child(2) pour sélectionner les éléments enfants suivants d'un élément parent, ou :nth-child(even) pour sélectionner tous les successeurs occupant des emplacements pairs. < /p>

Grammaire

:nth-child(an+b)

où a et b sont des entiers et n est un entier positif (à partir de 1).

Méthode

Pour créer un effet de pliage d'image pour une image, nous devons d'abord diviser l'image en différentes parties. Nous utiliserons des éléments

pour stocker différentes parties de l'image. Maintenant, pour sélectionner une section différente, sélectionnez la balise

et nous utiliserons le sélecteur :nth-child discuté ci-dessus. Enfin, nous transformerons chaque image d'une manière ou d'une autre pour créer un effet origami.

Le code suivant est essentiellement un programme HTML et CSS qui peut être utilisé pour créer un effet de pliage d'image interactif visuellement attrayant. Il fonctionne à travers diverses déclarations et directives qui, une fois exécutées, restituent des images qui semblent s'effondrer de manière visuellement attrayante et dynamique. Le code HTML commence par une déclaration doctype, suivie de l'ouverture du document HTML, de l'en-tête contenant l'en-tête des effets et de la déclaration de la balise de style. Vient ensuite la balise body, qui contient le titre et une liste non ordonnée d’éléments enfants. La liste est ensuite stylisée à l'aide de CSS pour créer un effet impliquant un conteneur de quatre éléments enfants, chacun avec un effet de réduction.

Le code CSS nécessite un ensemble d'instructions qui stylisent la liste non ordonnée, en spécifiant des détails tels que les marges, le remplissage et le positionnement du conteneur. De plus, il applique un dégradé de couleurs comme image d’arrière-plan pour l’effet de pli. Spécifiez ensuite la taille, l'emplacement et les propriétés d'affichage du conteneur. Les styles impliquent également la spécification des transitions et des ombres de boîte, qui contribuent à l'effet global de l'animation.

De plus, lorsque l'utilisateur survole le conteneur, il applique la propriété de transformation skewY() pour alterner les éléments enfants du conteneur, créant ainsi un effet dynamique qui simule l'apparence d'une image pliée en deux. L'utilisation de l'attribut nth-child() permet de sélectionner des éléments enfants alternatifs pour appliquer la transformation skewY(). En bref, l'attribut nth-child() est en outre utilisé pour spécifier la pose d'arrière-plan de chaque composant enfant, garantissant ainsi que chaque fragment de l'image est configuré avec précision pendant le processus de pliage.

Exemple

Voici le code complet que nous examinerons dans cet exemple -

<!DOCTYPE html>
<html>
<head>
   <title>How to create Image Folding Effect using HTML and CSS?</title>
   <style>
      body {
         margin: 0;
         padding: 0;
      }
      .container {
         margin: 10;
         padding: 0;
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%,-50%);
         width: 480px;
         height: 270px;
         display: flex;
      }
      .fold {
         list-style: none;
         width: 25%;
         background-image: linear-gradient(yellow,orange,red);;
         background-size: cover;
         height: 100%;
         transition: 0.5s;
      }
      .container:hover .fold:nth-child(odd) {
         transform: skewY(15deg);
         box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
      }
      .container:hover .fold:nth-child(even) {
         transform: skewY(-15deg);
         box-shadow: inset 20px 0 50px rgba(0,0,0, .5);
      }
      .container .fold:nth-child(1) {
         background-position: 0;
      }
      .container .fold:nth-child(2) {
         background-position: -120px;
      }
      .container .fold:nth-child(3) {
         background-position: -240px;
      }
      .container .fold:nth-child(4) {
         background-position: -360px;
      }
   </style>
</head>
<body>
   <h4>How to create Image Folding Effect using HTML and CSS?</h4>
   <ul class="container">
      <li class="fold"></li>
      <li class="fold"></li>
      <li class="fold"></li>
      <li class="fold"></li>
   </ul>
</body>
</html>

结论

最终，折叠图像印象构成了一个简单但有效的工具，可以将交互性和视觉吸引力融入您的网站。通过遵守本说明中阐述的规定程序，人们可以轻松地使用 HTML 和 CSS 产生这种印象。无论您是新手还是熟练的程序员，本文都为您提供了在网站上实现图像折叠效果所需的知识和材料。通过一点创造力和实验，您可以自定义效果以满足您的特定设计需求并增强访问者的用户体验。所以，今天就开始创建您自己的图像折叠效果吧！

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!