Die Implementierung von HTML5 Ja CSS3 Es bot nicht nur eine neue Möglichkeit, die Elemente auf einer Seite zu standardisieren, indem es die Möglichkeit bot, neue Elemente aufzunehmen, die einen größeren Nutzen bei der Entwicklung von Webanwendungen bieten würden, sondern es ermöglichte auch, deren Möglichkeiten zu erweitern, so dass neben Sprachen wie JavaScript für Effekte und Übergänge dank CSS3.
Offensichtlich gibt es Bibliotheken von JavaScript die unglaubliche Auswirkungen haben und ihre Implementierung recht einfach machen, aber meistens ist diese Funktionalität gekapselt und die Möglichkeiten der Modifikationen sind sehr kompliziert.
Für diese Fälle können wir verwenden CSS3 und mit ein wenig Arbeit können wir wirklich erstaunliche Effekte und Funktionalitäten wie ein Karussell erzielen, was in der Vergangenheit nur mit möglich war JavaScript.
Erstellen unseres Karussells
Zuerst werden wir den HTML-Code für unser Karussell einfügen, was recht einfach ist, da es nur unser Stylesheet enthält, das Tag, das anzeigt, dass alles, was sich darin befindet, grafischer Inhalt sein wird, wie Fotos, Diagramme oder In dieser Fall unser Karussell:
CSS3-KarussellEs ist wichtig, die Klassen hervorzuheben, die wir in unser div aufgenommen haben, da sie es sind, die es uns ermöglichen, die Manipulation in unserer CSS durchzuführen. Sobald dies erledigt ist, werden wir mit der Implementierung unseres Stylesheets fortfahren, indem wir zunächst unseren Elementen ein 3D-Erscheinungsbild geben. Dazu verwenden wir die Eigenschaft Perspektive Ja verwandeln:
.cards {Position: absolut; oben: 50%; links: 50%; Breite: 190px; Höhe: 210px; Rand: 0; -Webkit-Perspektive: 800px; Perspektive: 800px; -webkit-transform: übersetzen (-50%, -50%); -ms-transform: übersetzen (-50%, -50%); transformieren: übersetzen (-50%, -50%). }Nachdem wir dies getan haben, werden wir einige Animationen einfügen, um ihm den Karussell-Stil zu verleihen, der nach einer Regel arbeitet, die wir später definieren werden, wir definieren auch die Sekunden, in denen die Übergänge gemacht werden sollen, und wir legen die Position für unsere Karten fest das Karussell:
.cards__content {Position: absolut; Breite: 100 %; Höhe: 100%; -webkit-transform-style: bewahren-3d; Transformationsstil: Bewahren-3d; -webkit-transform: translateZ (-182px) rotieY (0); transformieren: translateZ (-182px) rotierenY (0); -Webkit-Animation: Karussell 10s unendlicher Kubikbezier (1, 0,015, 0,295, 1,225) vorwärts; Animation: Karussell 10s unendlicher Kubikbezier (1, 0,015, 0,295, 1,225) vorwärts; } .cards__element {Position: absolut; oben: 0; links: 0; Breite: 190px; Höhe: 210px; Randradius: 6px; }Jetzt werden wir die Karte separat bearbeiten mit n-Kind, dies, um für jede davon eine andere Hintergrundfarbe zu platzieren, und die Behandlung von Übergängen für sie:
.cards__element: n-tes-Kind (1) {Hintergrund: # 394fd5; -webkit-transform: rotationY (0) translateZ (182px); transformieren: drehenY (0) translateZ (182px); } .cards__element: n-tes-Kind (2) {Hintergrund: # 39d570; -webkit-transform: RotateY (120deg) translateZ (182px); transformieren: RotateY (120deg) translateZ (182px); } .cards__element: n-tes-Kind (3) {Hintergrund: # f0091f; -webkit-transform: rotationY (240deg) translateZ (182px); transformieren: RotateY (240deg) translateZ (182px); }Schließlich setzen wir eine Hintergrundfarbe für die Karosserie und wir fügen unsere Regeln für das Wort Karussell hinzu, wir machen das mit Schlüsselbilder der für die Definition des Codes für die Animation verantwortlich ist:
Körper {Hintergrund: # 6c4949; } @ -webkit-keyframes karussell {0%, 17.5% {-webkit-transform: translateZ (-182px) rotationY (0); transformieren: translateZ (-182px) rotierenY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transform: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transform: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transform: translateZ (-182px) rotateY (-360deg); }} @keyframes Karussell {0%, 17,5% {-webkit-transform: translateZ (-182px) rotationY (0); transformieren: translateZ (-182px) rotierenY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); transform: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); transform: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); transform: translateZ (-182px) rotateY (-360deg); }}Wenn dies fertig ist, sehen wir uns an, wie unser animiertes Karussell in unserem Browser aussieht:
Wie wir sehen, ist es ziemlich einfach, aber es erfüllt seine Funktionalität und was noch besser ist, ohne eine einzige Codezeile in zu verwenden JavaScriptEs bleibt nur jedem übrig, das Beispiel zu nehmen und ein wenig damit zu experimentieren, seine Größe zu vergrößern, Bilder hinzuzufügen und den Stil des Karussells zu ändern, was aufgrund seiner Bauweise durchaus möglich ist.
