Genomförandet av HTML5 Y CSS3 Det gav inte bara ett nytt sätt att standardisera elementen på en sida, vilket gav möjligheten att inkludera nya element som skulle ge en större grad av nytta vid utvecklingen av webbapplikationer, men det gjorde det också möjligt att utöka möjligheterna till dessa, åt sidan språk som JavaScript för effekter och övergångar tack vare CSS3.
Uppenbarligen finns det bibliotek av JavaScript som har otroliga effekter och gör deras genomförande ganska enkelt, men för det mesta är denna funktionalitet inkapslad och möjligheterna till ändringar är mycket komplicerade.
För dessa fall kan vi använda CSS3 och med lite arbete kan vi uppnå riktigt fantastiska effekter och funktioner som en karusell, något som tidigare bara var möjligt med JavaScript.
Skapa vår karusell
Först kommer vi att inkludera HTML -koden för vår karusell, vilket kommer att vara ganska enkelt eftersom det bara kommer att inkludera vårt stilark, taggen för att indikera att allt som finns inuti det kommer att vara grafiskt innehåll, till exempel foton, diagram eller i detta fall vår karusell:
CSS3 -karusellDet är viktigt att markera de klasser som vi har inkluderat i vår div, eftersom det är de som gör att vi kan utföra manipulationen i vårt css. När detta är gjort fortsätter vi med implementeringen av vårt stilark, först med att ge våra element ett 3D -utseende, för detta kommer vi att använda fastigheten perspektiv Y omvandla:
. kort {position: absolut; topp: 50%; kvar: 50%; bredd: 190px; höjd: 210px; marginal: 0; -webkit-perspektiv: 800px; perspektiv: 800px; -webkit-transform: translate (-50%, -50%); -ms-transform: translate (-50%, -50%); transform: translate (-50%, -50%); }Med detta kommer vi att inkludera några animationer för att ge det karusellstilen som fungerar enligt en regel som vi kommer att definiera senare, vi definierar också de sekunder som vi vill att den ska göra övergångarna, och vi ställer in positionen för våra kort inom karusellen:
.cards__content {position: absolut; bredd: 100%; höjd: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (0); -webkit-animation: karusell 10s oändlig kubik-bezier (1, 0,015, 0,295, 1,225) framåt; animation: karusell 10s oändlig cubic-bezier (1, 0.015, 0.295, 1.225) framåt; } .cards__element {position: absolut; topp: 0; vänster: 0; bredd: 190px; höjd: 210px; gränsradie: 6px; }Nu kommer vi att arbeta med kortet separat med nth-barnet, detta för att placera en annan bakgrundsfärg för var och en av dessa och hanteringen av övergångar för dem:
.cards__element: nth-child (1) {bakgrund: # 394fd5; -webkit-transform: rotateY (0) translateZ (182px); transform: rotateY (0) translateZ (182px); } .cards__element: nth-child (2) {bakgrund: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); transform: rotateY (120deg) translateZ (182px); } .cards__element: nth-child (3) {bakgrund: # f0091f; -webkit-transform: rotateY (240deg) translateZ (182px); transform: rotateY (240deg) translateZ (182px); }Slutligen satte vi en bakgrundsfärg för kropp och vi lägger till våra regler för ordet karusell, vi gör det här med nyckelbilder som är ansvarig för att definiera koden för animationen:
kropp {bakgrund: # 6c4949; } @ -webkit-keyframes karusell {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (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 karusell {0%, 17,5% {-webkit-transform: translateZ (-182px) rotateY (0); transform: translateZ (-182px) rotateY (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); }}Med det här klart, låt oss se hur vår animerade karusell ser ut i vår webbläsare:
Som vi kan se är det ganska enkelt men det uppfyller dess funktionalitet och vad som är ännu bättre utan att använda en enda kodrad i JavaScriptDet återstår bara för alla att ta exemplet och experimentera lite med det, öka dess storlek, lägga till bilder och ändra karusellens stil, något som är fullt möjligt på grund av hur det byggdes.
