Créez un carrousel rotatif 3D interactif, en utilisant la transformation 3D CSS et JavaScript pour améliorer l'affichage dynamique des images Web ou du contenu. Cet article vous guidera étape par étape comment créer ce composant.
Lorsque j'ai étudié ce sujet pour la première fois, je n'avais pas besoin d'un carrousel 3D, mais j'ai accordé plus d'attention à ses détails de mise en œuvre spécifiques. La technologie de base est bien sûr à partir du niveau 1 du module transformations CSS, mais dans le processus, de nombreuses autres technologies de développement frontal seront appliquées, impliquant tous les aspects de CSS, SASS et JavaScript client.
Ce codePen montre différentes versions de composants et je vais vous montrer comment les construire.
Pour illustrer les paramètres de la conversion CSS 3D, je vais vous montrer la version CSS pure du composant. Je vais ensuite vous montrer comment l'améliorer à l'aide de JavaScript pour développer un script de composant simple.
Points clés
Marque du graphique de caractères
Pour le balisage, l'image à l'intérieur du composant est enveloppée dans un élément <figure></figure>, qui fournit un cadre de base:
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div>Ce sera notre point de départ.
Structure géométrique de la figure de carrousel
Avant de regarder CSS, décrivons les plans qui seront élaborés dans les sections suivantes.
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151412585.jpg" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " /> </p>
<p> Par conséquent, le nombre de côtés de ce polygone est le même que le nombre d'images dans le diagramme du carrousel: les polygones de trois images sont des triangles équilatés;
</p> Et s'il y a moins de trois images dans le carrousel? Le polygone ne peut pas être défini et le processus suivant ne peut pas être appliqué tel quel. Dans tous les cas, il est tout à fait inutile d'avoir une seule image; deux images sont légèrement plus probables, et ils peuvent être placés sur deux points en face du cercle avec des diamètres. Pour plus de simplicité, ces cas spéciaux ne sont pas traités et supposent qu'il y a au moins trois images. Cependant, la modification du code pertinente n'est pas difficile. <p><p> Ce polygone de référence imaginaire sera situé dans l'espace 3D, perpendiculaire au plan de la fenêtre et repousser son centre vers l'écran, la distance est égale à sa distance centrale (la distance entre un bord du polygone à son centre) , comme le montre la figure ci-dessous: </p>
<p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173967151540038.jpg" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " /> </p>
<p> De cette façon, le bord actuel orienté vers la visionneuse sera au plan d'écran z = 0, tandis que l'image avant ne sera pas affectée par le raccourcissement en perspective et aura sa taille 2D normale. La lettre D dans l'image représente la valeur de l'attribut de perspective CSS. </p>
<p> <strong> Construisez la structure géométrique du graphique du carrousel </strong> </p>
<p> Dans cette section, je vais vous montrer les règles CSS clés, que je vais expliquer étape par étape. </p>
<p> Dans l'extrait de code suivant, utilisez certaines variables SASS pour faciliter la configuration du composant. J'utiliserai <code>$n pour représenter le nombre d'images dans le carrousel et utiliser $item-width pour spécifier la largeur de l'image.
<figure> est la boîte d'inclusion de la première image et est également l'élément de référence autour de laquelle d'autres images sont positionnées et transformées. En supposant que le carrousel n'a plus qu'une seule image à montrer, je peux commencer par la taille et l'alignement:
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div> <figure> ont une largeur d'objet de carrousel prescrit et ont la même hauteur que l'image (ils peuvent avoir des tailles différentes, mais doivent avoir le même rapport d'aspect). De cette façon, la hauteur du conteneur de carrousel sera automatiquement ajustée en fonction de la hauteur de l'image. De plus, <figure> est centré horizontalement dans le récipient de carrousel.
La première image ne nécessite pas de conversion supplémentaire car elle est déjà dans sa position cible, c'est-à-dire l'avant du carrousel.
peut faire pivoter le carrousel dans l'espace 3D en appliquant une transformation de rotation à l'élément <figure>. Cette rotation doit être autour du centre du polygone, donc je vais modifier l'origine transformée par défaut de <figure>:
.carousel {
display: flex;
flex-direction: column;
align-items: center;
> * {
flex: 0 0 auto;
}
.figure {
width: $item-width;
transform-style: preserve-3d;
img {
width: 100%;
&:not(:first-of-type) {
display: none /* Just for now */
}
}
}
}Cette valeur est inverse car dans CSS, la direction positive de l'axe Z est de quitter l'écran et de faire face au spectateur. Des supports sont nécessaires pour éviter les erreurs de syntaxe SASS. Le calcul de la distance paracentrique du polygone sera expliqué plus tard.
Après avoir converti le système de référence de l'élément <figure>, le carrousel entier peut être tourné par sa (nouvelle) rotation de l'axe Y:
.carousel figure {
transform-origin: 50% 50% (-$apothem);
}Je retournerai les détails de cette rotation plus tard.
Continuons à convertir d'autres images. En utilisant le positionnement absolu, les images sont empilées à l'intérieur <figure>:
.carousel figure {
transform: rotateY(/* some amount here */rad);
} Z-Index est ignorée car ce n'est qu'une étape préliminaire dans la conversion ultérieure. En fait, chaque image peut désormais faire pivoter un angle autour de l'axe y de l'image du carrousel, qui dépend des bords polygonaux de l'image attribuée. Tout d'abord, comme l'élément <figure>, modifiez l'origine transformée par défaut de l'image et déplacez-la au centre du polygone:
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div> L'image peut alors faire pivoter une quantité sur son nouvel axe Y, qui est donnée par ($i - 1) * $theta radians, où $i est l'index de l'image (à partir de 1), $theta = 2 * $PI / $n, où $PI signifie la constante mathématique π. Ainsi, la deuxième image tournera $theta, la troisième tournera 2 * $theta, et ainsi de suite jusqu'à ce que la dernière image tourne ($n - 1) * $theta.
En raison de la nature hiérarchique des transformations CSS imbriquées, cet arrangement relatif des images sera conservé pendant la rotation de la carte du carrousel (c'est-à-dire la rotation autour de l'axe y modifié de <figure>).
La quantité de rotation de cette image peut être attribuée à l'aide de la commande de contrôle SASS @for:
.carousel {
display: flex;
flex-direction: column;
align-items: center;
> * {
flex: 0 0 auto;
}
.figure {
width: $item-width;
transform-style: preserve-3d;
img {
width: 100%;
&:not(:first-of-type) {
display: none /* Just for now */
}
}
}
} Il s'agit d'utiliser la structure for...through au lieu de for...to, car pour for...to, la dernière valeur attribuée à la variable d'index $i sera n-1 au lieu de n.
Remarque deux instances de syntaxe d'interpolation SASS '#{}. Dans la première instance, il est utilisé pour indexer le sélecteur :nth-child() dans la deuxième instance, il est utilisé pour définir la valeur de la propriété de rotation.
Calculez la distance paracentrique
Le calcul de la distance paracentrique du polygone dépend du nombre de bords et de la largeur des bords, c'est-à-dire des variables $n et $item-width. La formule est:
.carousel figure {
transform-origin: 50% 50% (-$apothem);
} où tan() est la fonction trigonométrique tangente.
Cette formule peut être dérivée par une certaine géométrie et trigonométrie. Dans le code source du stylo, cette formule n'est pas implémentée comme c'est parce que la fonction tangente n'est pas disponible dans SASS, donc des valeurs codées en dur sont utilisées. Au lieu de cela, la formule sera pleinement implémentée dans une démonstration JavaScript.
Élément de carrousel intervalle
À ce stade, les images du carrousel sont "cousues" côte à côte pour former la forme du polygone souhaité. Mais ici, ils sont étroitement empilés ensemble, et dans un carrousel 3D, il y a généralement de l'espace entre eux. Cette distance améliore la perception de l'espace 3D car elle vous permet de voir une image avec le dos face à l'arrière du carrousel.
Cet espace entre les images peut éventuellement être ajouté en introduisant une autre variable de configuration $item-separation et en l'utilisant comme remplissage horizontal pour chaque élément <img alt="Construire un carrousel rotatif 3D avec CSS et JavaScript" >. Plus précisément, prenez la moitié de cette valeur en tant que remplissage gauche et droit:
.carousel figure {
transform: rotateY(/* some amount here */rad);
}Le résultat final peut être vu dans la démonstration suivante: (la liaison du codepen doit être insérée ici pour montrer l'élément de carrousel intervalle)
L'image devient translucide en utilisant l'attribut opacity pour mieux illustrer la structure du carrousel, et la disposition flexible sur l'élément racine du carrousel est utilisée pour la centrer verticalement dans la fenêtre.
Image du carrousel de rotation
Pour faciliter la rotation de l'image du carrousel de test, j'ajouterai un contrôle d'interface utilisateur pour naviguer dans les deux sens entre les images. (Le lien Codepen doit être inséré ici pour afficher l'image du carrousel rotatif)
Nous utilisons une variable entière currImage pour indiquer quelle image se trouve devant le carrousel. Cette variable augmente ou diminue d'une unité lorsque l'utilisateur interagit avec le bouton précédent / Suivant.
Update currImage, la rotation de l'image du carrousel sera effectuée de la manière suivante:
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div>(Ici et dans l'extrait de code suivant, insérez des expressions dans des chaînes en utilisant des littéraux de modèle ES6; si vous préférez, vous pouvez utiliser l'opérateur traditionnel "" Concaténation)
où theta est le même qu'avant:
.carousel {
display: flex;
flex-direction: column;
align-items: center;
> * {
flex: 0 0 auto;
}
.figure {
width: $item-width;
transform-style: preserve-3d;
img {
width: 100%;
&:not(:first-of-type) {
display: none /* Just for now */
}
}
}
} La rotation est -theta parce que pour accéder à l'élément suivant, une rotation dans le sens antihoraire est requise et cette valeur de rotation est négative dans la conversion CSS.
Veuillez noter que la valeur currImage n'est pas limitée à la plage [0, numImages – 1], mais peut croître infiniment, à la fois dans des directions positives et négatives. En fait, si l'image avant est la dernière (donc currImage == n-1) et que l'utilisateur clique sur le bouton Suivant, si nous réinitialisons currImage à 0 avant la première image de carrousel, l'angle de rotation sera de (n-1)*theta converti en 0 , qui fera tourner le carrousel dans la direction opposée sur toutes les images précédentes. Un problème similaire se produit lorsque le bouton précédent est cliqué si l'image avant est la première.
Pour être difficile, je devrais même vérifier les débordements potentiels de currentImage, car le type de données Number ne peut pas prendre des valeurs arbitrairement importantes. Ces vérifications ne sont pas implémentées dans le code de démonstration.
amélioré avec javascript
Après avoir vu le CSS de base qui forme le cœur du graphique du carrousel, il est désormais possible d'améliorer les composants de diverses manières en utilisant JavaScript, comme:
Tout d'abord, je supprime les variables et les règles liées à la conversion d'origine et de rotation à partir de la feuille de style, car elles seront effectuées en utilisant JavaScript: (le code CSS mis à jour doit être inséré ici)
Ensuite, la fonction carousel() dans le script est responsable de l'initialisation de l'instance:
.carousel figure {
transform-origin: 50% 50% (-$apothem);
} root se réfère à l'élément DOM qui sauve le diagramme du carrousel.
Habituellement, cette fonction sera un constructeur qui génère un objet pour chaque graphique de carrousel sur la page, mais ici je n'écris pas de bibliothèque de carrousel, donc une fonction simple suffira.
Pour instancier plusieurs composants sur la même page, le code attend que toutes les images se chargent, enregistre l'écouteur de l'événement window pour l'objet load, puis appelle carousel pour chaque élément avec le carousel() classe
.carousel figure {
transform: rotateY(/* some amount here */rad);
}
carousel()
Avant de vérifier le code des paramètres de conversion, je couvrirai certaines variables clés et comment les initialiser en fonction de la configuration de l'instance:
<div class="carousel">
<figure>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
...
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Building a 3D Rotating Carousel with CSS and JavaScript " />
</figure>
</div> Le nombre d'images (n) est initialisé en fonction du nombre d'éléments enfants de l'élément <figure>. L'espacement entre les diapositives (GAP) est initialisé à partir de la propriété HTML5 data-gap (si définie). L'indicateur de visibilité arrière (BFC) est lu à l'aide de l'API dataset de HTML5. Ceci sera utilisé plus tard pour déterminer si l'image à l'arrière du carrousel est visible.
Définir la conversion CSS
Le code pour définir les attributs liés à la conversion CSS est encapsulé dans setupCarousel(). Cette fonction imbriquée a deux paramètres. Le premier est le nombre d'éléments dans le graphique du carrousel, c'est-à-dire les n variables introduites ci-dessus. Le deuxième paramètre S est la longueur latérale du polygone du carrousel. Comme je l'ai mentionné plus tôt, cela est égal à la largeur de l'image, vous pouvez donc lire la largeur actuelle de l'un d'eux en utilisant getComputedStyle():
.carousel {
display: flex;
flex-direction: column;
align-items: center;
> * {
flex: 0 0 auto;
}
.figure {
width: $item-width;
transform-style: preserve-3d;
img {
width: 100%;
&:not(:first-of-type) {
display: none /* Just for now */
}
}
}
}De cette manière, la largeur d'image peut être définie en utilisant la valeur de pourcentage.
Pour garder le graphique du carrousel adaptatif, j'ai enregistré un auditeur pour l'événement de redimensionnement de la fenêtre, qui appelle à nouveau la taille (éventuellement modifiée) de l'image setupCarousel():
.carousel figure {
transform-origin: 50% 50% (-$apothem);
}Pour plus de simplicité, je n'ai pas dé-jiter le redimensionner l'auditeur.
setupCarousel() La première chose que je fais est de calculer la distance paracentrique d'un polygone en utilisant les paramètres passés et la formule discutée précédemment:
.carousel figure {
transform: rotateY(/* some amount here */rad);
} Cette valeur est ensuite utilisée pour modifier le <figure> de l'élément transform-origin pour obtenir le nouvel axe de rotation du carrousel:
.carousel figure img:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
}Ensuite, appliquez le style d'image:
.img:not(:first-of-type) {
transform-origin: 50% 50% (-$apothem);
}La première boucle alloue le rembourrage pour l'espace entre les articles du carrousel. La deuxième boucle met en place la conversion 3D. La dernière boucle gère le côté arrière si le drapeau pertinent est spécifié dans la configuration du diagramme du carrousel.
Enfin, appelez rotateCarousel() pour déplacer l'image actuelle vers l'avant. Il s'agit d'une petite fonction d'assistance, étant donné l'index de l'image à afficher, il tourne l'élément <figure> autour de son axe y pour déplacer l'image cible vers l'avant. Le code de navigation l'utilise également pour se déplacer d'avant en arrière:
.carousel figure img {
@for $i from 2 through $n {
&:nth-child(#{$i}) {
transform: rotateY(#{($i - 1) * $theta}rad);
}
}
}Il s'agit du résultat final, une démonstration où plusieurs carrousels sont instanciés, chacun avec une configuration différente: (la liaison du codeur final doit être insérée ici)
Source et conclusion
Avant la fin, je tiens à remercier certaines sources pour avoir recherché ce tutoriel: (les sources de référence doivent être répertoriées ici)
Si vous avez des questions ou des commentaires sur la fonction du code ou du diagramme de carrousel, n'hésitez pas à laisser un message ci-dessous.
FAQ sur la construction de diagrammes de carrousel rotatif 3D avec CSS et JavaScript
L'adaptation de vos graphiques de carrousel rotatif 3D implique l'utilisation de requêtes multimédias dans CSS. Les requêtes multimédias vous permettent d'appliquer différents styles à différents appareils en fonction de la taille de l'écran de votre appareil. Vous pouvez ajuster la taille et la position des éléments du graphique du carrousel en fonction des écrans plus petits. Considérez également les événements tactiles sur les appareils mobiles, car ils n'ont pas un état de survol comme des ordinateurs de bureau.
Oui, vous pouvez ajouter plus de diapositives au carrousel. Dans la structure HTML, vous pouvez ajouter plus d'éléments de liste dans une liste non ordonnée. Chaque élément de liste représente une diapositive. N'oubliez pas d'ajuster l'angle de rotation de chaque diapositive dans CSS pour les positionner correctement dans l'espace 3D.
Vous pouvez ajouter des boutons de navigation aux diagrammes de carrousel à l'aide de HTML et JavaScript. Dans votre HTML, ajoutez deux boutons pour la navigation précédente et suivante. Dans votre javascript, ajoutez des auditeurs d'événements à ces boutons. Lorsque vous cliquez sur, ils doivent mettre à jour la rotation du carrousel pour afficher la diapositive précédente ou suivante.
Bien sûr, vous pouvez utiliser des images comme diaporamas. Au lieu de définir des couleurs d'arrière-plan dans CSS, vous pouvez définir des images d'arrière-plan pour chaque diapositive. Assurez-vous que l'image a la taille et la résolution correctes pour le meilleur effet visuel.
La place automatique peut être ajoutée à l'aide de JavaScript. Vous pouvez utiliser la fonction setInterval pour mettre à jour automatiquement la rotation du diagramme du carrousel après une période de temps. N'oubliez pas de nettoyer les intervalles lorsque l'utilisateur interagit avec le carrousel pour éviter un comportement inattendu.
Oui, vous pouvez ajouter des effets de transition au carrousel à l'aide de CSS. La propriété transition vous permet de changer d'animation dans les propriétés CSS sur une durée spécifiée. Vous pouvez l'appliquer à l'attribut transform pour animer la rotation de la carte du carrousel.
Faire de la boucle infinie du graphique du carrousel implique un javascript. Lorsque le carrousel atteint la dernière diapositive, vous pouvez réinitialiser sa rotation à la première diapositive. Cela donne aux gens l'illusion de boucles infinies.
Oui, vous pouvez ajouter du texte sur la diapositive. Dans votre HTML, vous pouvez ajouter des éléments de texte à chaque élément de liste. Dans votre CSS, localisez les éléments de texte en fonction de la position de la diapositive et stylisez-les au besoin.
CSS peut être utilisé pour ajouter des effets de fondu. Vous pouvez utiliser l'attribut opacity en combinaison avec l'attribut transition pour animer l'effet de fondu. Ajustez le diaporama pour positionner dans le carrousel pour créer l'effet souhaité. opacity
Oui, vous pouvez utiliser différentes formes comme carrousels. La forme du graphique du carrousel est déterminée par l'attribut transform dans CSS. En ajustant la valeur de la propriété transform, vous pouvez créer un carrousel de cubes, des cylindres ou toute autre forme 3D.
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!
Qu'est-ce que la HD mobile
Quel plugin est Composer ?
Comment supprimer un fichier sous Linux
qu'est-ce qu'Internet.exe
Comment utiliser la plus grande fonction
Comment résoudre le problème du transfert lent du nom de domaine du serveur
Comment résoudre l'erreur 500 du serveur interne
Outil de requête de sous-domaine de site Web
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
