CSS Infinite 3D Cliders

Cette série de tutoriels explore la création de curseurs d'image dynamiques en utilisant uniquement HTML et CSS. Nous montrerons comment divers résultats peuvent être obtenus avec un balisage cohérent et un style CSS varié, quel que soit le nombre d'images. Les versements précédents comportaient un curseur circulaire et rotatif infiniment et un curseur de style Polaroid. Cet versement se plonge dans des curseurs tridimensionnels. Bien que initialement complexe, une grande partie du code s'appuie sur des exemples précédents, avec des modifications. Les nouveaux arrivants de la série devraient passer en revue les articles antérieurs pour le contexte fondamental.

Résumé de la série Sliders CSS

• curseur d'image rotatif circulaire
• Flippant à travers des images Polaroid
• Curseurs 3D infinis (article actuel)

Notre objectif est de créer un curseur 3D engageant visuellement. À première vue, il ressemble à un cube rotatif affichant quatre images; Cependant, il utilise en fait six images organisées stratégiquement. La visualisation du curseur dans une perspective différente révèle cet arrangement.

Comprendre l'arrangement d'image

Maintenant que nous avons visualisé la disposition de l'image, examinons le code.

Structure fondamentale

Le HTML reste cohérent avec les curseurs précédents:

<div>
  <img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src=""><img alt="" src="">
</div>

La grille CSS est utilisée pour empiler les images:

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

Implémentation d'animation

La logique du curseur reflète le curseur circulaire du premier article. Les images forment un polygone; Une rotation complète revient à l'image initiale. Le curseur précédent a utilisé transform-origin et animation-delay. Ce curseur 3D utilise transform pour le positionnement 3D puis fait pivoter le conteneur.

SASS est utilisé pour parcourir les images et appliquer des transformations:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
     transform: 
       rotate(#{360*($i - 1) / $n}deg) /* 1 */
       translateY(50% / math.tan(180deg / $n)) /* 2 */ 
       rotateX(90deg); /* 3 */
  }
}

La propriété transform utilise trois valeurs:

1. Rotation initiale des images. L'angle dépend du nombre d'images (n), incréments par 360 deg / n.
2. Traduction pour aligner les points centraux. La distance est calculée comme 50% / tan (180 deg / n).
3. rotation autour de l'axe des x (90deg) pour la disposition souhaitée.

Rotation des conteneurs pour la boucle infinie

Enfin, la rotation du conteneur crée l'effet de curseur infini:

.gallery {
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes r {
  0%, 3% {transform: var(--_t) rotate(0deg); }
  @for $i from 1 to $n {
    #{($i/$n)*100 - 2}%, 
    #{($i/$n)*100 + 3}% {
      transform: var(--_t) rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: var(--_t) rotate(-360deg); }
}

Les images clés sont similaires au curseur circulaire, tournant le conteneur pour afficher chaque image. La rotation de l'axe X -90 degrés compense la rotation 90 degrés de l'image, et la perspective ajoute l'effet 3D.

d'autres variations de curseur: curseurs verticaux et cubes

L'article explore ensuite les variations: un curseur vertical (réalisé en changeant rotate() en rotateX() dans les images clés et les transformations d'image) et un curseur cube (en utilisant six images et des rotations spécifiques pour chaque visage). L'animation du curseur du cube est plus complexe, nécessitant une orchestration minutieuse des rotations sur plusieurs axes. Une variation aléatoire du curseur de cubes est également présentée, introduisant des rotations non séquentielles pour un effet plus imprévisible.

Conclusion

Le tutoriel conclut en mettant en évidence la puissance de CSS dans la création d'animations complexes avec un minimum de HTML et JavaScript. La série démontre la polyvalence de CSS pour construire des éléments interactifs et visuellement attrayants.

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!