Maison > interface Web > tutoriel CSS > Comment puis-je redresser les bords d'une galerie d'images inclinées tout en conservant l'inclinaison centrale ?

Comment puis-je redresser les bords d'une galerie d'images inclinées tout en conservant l'inclinaison centrale ?

Patricia Arquette
Libérer: 2024-12-10 21:28:09
original
276 Les gens l'ont consulté

How Can I Unskew the Edges of a Skewed Image Gallery While Maintaining the Center Skew?

Désincliner les extrémités d'un assortiment de plusieurs images asymétriques

Auparavant, une méthode a été explorée pour incliner efficacement un assortiment d'images. Cependant, un défi est apparu en tentant de corriger l'inclinaison des extrémités les plus à gauche (box1) et à l'extrême droite (box6) du conteneur d'images asymétriques.

Voici une solution améliorée :

Le CSS fourni le code modifie efficacement l'inclinaison des images les plus à gauche et à l'extrême droite dans le conteneur, tout en préservant l'apparence asymétrique de l'intérieur. images.

Mise en œuvre :

  1. Créer un conteneur parent :

    • Définir un élément conteneur avec la classe "gallery" qui sert de parent à l'image collection.
  2. Définir les variables d'inclinaison :

    • Initialiser une variable --s qui contrôle la taille de la partie inclinée .
  3. Stylez le Galerie :

    • Utilisez la grille CSS pour organiser les images dans une rangée et les centrer verticalement.
    • Définissez la largeur de l'image sur 0, la largeur minimale sur calc(100% var (--s)) pour créer l'inclinaison gauche et découper l'image à l'aide d'un chemin de détourage polygonal pour obtenir la forme souhaitée.
    • Exploitez CSS transitions pour animer les images en survol.
  4. Ajuster la première et la dernière images :

    • Ajuster la largeur minimale du première image (calc(100% var(--s)/2)) et utilisez place-self : start pour démarrer l'inclinaison à partir de la gauche bord.
    • Répétez le processus pour la dernière image, mais placez-vous : terminez et ajustez le chemin du clip pour commencer l'inclinaison à partir du bord droit.
  5. Configurer l'effet de survol (facultatif) :

    • Si vous le souhaitez, ajoutez du CSS pour activer un effet de survol qui agrandit l'image sélectionnée, créant une expérience de galerie dynamique.

Avantages :

  • Cette solution permet le contrôle inclinaison des images finales sans affecter les images intérieures.
  • L'effet de survol offre une interactivité et un visuel supplémentaires attrait.
  • Le code est modulaire et peut être facilement personnalisé pour répondre à des exigences de conception spécifiques.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal