L'implémentation de HTML5 Oui CSS3 Non seulement cela a fourni une nouvelle façon de standardiser les éléments sur une page, donnant la possibilité d'inclure de nouveaux éléments qui offriraient un plus grand degré d'utilité dans le développement d'applications Web, mais il a également permis d'étendre les possibilités de celles-ci, laissant à côté des langues telles que JavaScript pour les effets et les transitions grâce à CSS3.
Il existe évidemment des bibliothèques de JavaScript qui ont des effets incroyables et rendent leur mise en œuvre assez simple, mais la plupart du temps cette fonctionnalité est encapsulée et les possibilités de modifications sont grandement compliquées.
Pour ces cas, nous pouvons utiliser CSS3 et avec un peu de travail, nous pouvons obtenir des effets et des fonctionnalités vraiment incroyables comme un carrousel, quelque chose qui n'était possible dans le passé qu'avec JavaScript.
Création de notre carrousel
Nous allons d'abord inclure le code HTML de notre carrousel, ce qui sera assez simple puisqu'il n'inclura que l'inclusion de notre feuille de style, la balise pour indiquer que tout ce qui s'y trouve sera du contenu graphique, comme des photos, des diagrammes ou dans ce cas notre carrousel :
carrousel CSS3Il est important de mettre en évidence les classes que nous avons incluses dans notre div, car ce sont elles qui nous permettront d'effectuer la manipulation dans notre css. Une fois cela fait, nous procéderons à la mise en place de notre feuille de style, en commençant d'abord par donner à nos éléments un aspect 3D, pour cela nous utiliserons la propriété perspective Oui transformer:
.cards {position : absolue; haut : 50 % ; gauche : 50 % ; largeur : 190px ; hauteur : 210px ; marge : 0 ; -webkit-perspective : 800px ; perspective : 800px ; -webkit-transform : traduire (-50%, -50%) ; -ms-transform : traduire (-50%, -50%) ; transformer : traduire (-50%, -50%) ; }Ayant cela, nous allons inclure des animations pour lui donner le style carrousel fonctionnant selon une règle que nous définirons plus tard, nous définissons également les secondes pendant lesquelles nous voulons qu'il fasse les transitions, et nous définissons la position de nos cartes dans le manège:
.cards__content {position : absolu; largeur : 100 % ; hauteur : 100 % ; -webkit-transform-style : preserve-3d ; style de transformation : conserver-3d ; -webkit-transform : translateZ (-182px) rotateY (0) ; transformer : translateZ (-182px) rotateY (0) ; -webkit-animation : carrousel 10s infini cubique-bézier (1, 0,015, 0,295, 1,225) vers l'avant; animation : carrousel 10s infini cubique-bézier (1, 0,015, 0,295, 1,225) vers l'avant; } .cards__element {position : absolu ; haut : 0 ; à gauche : 0; largeur : 190px ; hauteur : 210px ; rayon de bordure : 6 px ; }Maintenant, nous allons travailler sur la carte séparément en utilisant nième-enfant, ceci pour placer une couleur de fond différente pour chacun d'eux et la gestion des transitions pour eux :
.cards__element : nth-child (1) {background : # 394fd5; -webkit-transform : rotateY (0) translateZ (182px) ; transformer : rotationY (0) translateZ (182px) ; } .cards__element : nth-child (2) {background : # 39d570 ; -webkit-transform : rotateY (120deg) translateZ (182px) ; transformation : rotationY (120 degrés) translationZ (182 px); } .cards__element : nth-child (3) {background : # f0091f; -webkit-transform : rotateY (240deg) translateZ (182px) ; transformer : rotationY (240 deg) translateZ (182px); }Enfin, nous définissons une couleur de fond pour le corps et nous ajoutons nos règles pour le mot carrousel, nous le faisons avec images clés qui se charge de définir le code de l'animation :
corps {arrière-plan : # 6c4949; } @ -webkit-keyframes carrousel {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transformer : translateZ (-182px) rotateY (0) ; } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformer : translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformer : translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformer : translateZ (-182px) rotateY (-360deg); }} @keyframes carrousel {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0) ; transformer : translateZ (-182px) rotateY (0) ; } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transformer : translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transformer : translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transformer : translateZ (-182px) rotateY (-360deg); }}Ceci étant prêt, voyons à quoi ressemble notre carrousel animé dans notre navigateur :
Comme on peut le voir, c'est assez simple mais il remplit sa fonctionnalité et ce qui est encore mieux sans utiliser une seule ligne de code dans JavaScriptIl ne reste plus qu'à chacun de prendre l'exemple et de l'expérimenter un peu, en augmentant sa taille, en ajoutant des images et en changeant le style du carrousel, ce qui est tout à fait possible de par la façon dont il a été construit.
