Въвеждането на HTML5 Y CSS3 Той не само предостави нов начин за стандартизиране на елементите на страницата, давайки възможност за включване на нови елементи, които биха осигурили по -голяма степен на полезност при разработването на уеб приложения, но също така позволи да се разширят възможностите им, оставяйки настрана езици като напр JavaScript за ефекти и преходи благодарение на CSS3.
Очевидно има библиотеки на JavaScript които имат невероятни ефекти и правят изпълнението им доста просто, но през повечето време тази функционалност е капсулирана и възможностите за модификации са много сложни.
За тези случаи можем да използваме CSS3 и с малко работа можем да постигнем наистина невероятни ефекти и функционалности като въртележка, нещо, което в миналото беше възможно само с JavaScript.
Създаване на нашата въртележка
Първо ще включим HTML кода за нашата въртележка, който ще бъде доста прост, тъй като ще включва само включването на нашата таблица със стилове, етикетът, който показва, че всичко, което е вътре, ще бъде графично съдържание, като снимки, диаграми или в този случай нашата въртележка:
CSS3 въртележкаВажно е да подчертаем класовете, които сме включили в нашия div, тъй като те са тези, които ще ни позволят да извършим манипулацията в нашия css. След като това бъде направено, ще пристъпим към внедряването на нашата таблица със стилове, като започнем първо, като придадем на елементите си 3D вид, за това ще използваме свойството перспектива Y трансформирайте:
.карти {позиция: абсолютна; отгоре: 50%; ляво: 50%; ширина: 190px; височина: 210px; марж: 0; -webkit-перспектива: 800px; перспектива: 800px; -webkit-преобразуване: превод (-50%, -50%); -ms-преобразуване: превод (-50%, -50%); преобразуване: превод (-50%, -50%); }Като имаме това, ще включим някои анимации, за да му дадем стил на въртележка, работещ според правило, което ще дефинираме по -късно, също така дефинираме секундите, през които искаме да прави преходите, и задаваме позицията за нашите карти в рамките въртележка:
.cards__content {позиция: абсолютна; ширина: 100%; височина: 100%; -webkit-transform-style: save-3d; трансформиращ стил: запазвам-3d; -webkit-преобразуване: translateZ (-182px) rotateY (0); преобразуване: translateZ (-182px) rotateY (0); -webkit-анимация: въртележка 10s безкраен кубик-безие (1, 0.015, 0.295, 1.225) напред; анимация: въртележка 10s безкраен кубик-безие (1, 0,015, 0,295, 1,225) напред; } .cards__element {позиция: абсолютна; отгоре: 0; ляво: 0; ширина: 190px; височина: 210px; рамка-радиус: 6px; }Сега ще работим върху картата отделно, като използваме n-то дете, това, за да поставите различен цвят на фона за всеки от тях и обработката на преходите за тях:
.cards__element: nth-child (1) {background: # 394fd5; -webkit-преобразуване: завъртете Y (0) translateZ (182px); преобразуване: завъртете Y (0) translateZ (182px); } .cards__element: nth-child (2) {background: # 39d570; -webkit-transform: rotateY (120deg) translateZ (182px); преобразуване: завъртане Y (120 градуса) преводZ (182 пиксела); } .cards__element: nth-child (3) {background: # f0091f; -webkit-преобразуване: завъртете Y (240deg) translateZ (182px); преобразуване: завъртане Y (240 градуса) преводZ (182 пиксела); }Накрая зададохме цвят на фона за тяло и добавяме нашите правила за думата въртележка, правим това с ключови кадри който е отговорен за дефинирането на кода за анимацията:
тяло {фон: # 6c4949; } @ -webkit-keyframes carousel {0%, 17.5% {-webkit-transform: translateZ (-182px) rotateY (0); преобразуване: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); преобразуване: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); преобразуване: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); преобразуване: translateZ (-182px) rotateY (-360deg); }} @keyframes carousel {0%, 17.5% {-webkit-transform: translateZ (-182px) rotateY (0); преобразуване: translateZ (-182px) rotateY (0); } 27,5%, 45% {-webkit-transform: translateZ (-182px) rotateY (-120deg); преобразуване: translateZ (-182px) rotateY (-120deg); } 55%, 72,5% {-webkit-transform: translateZ (-182px) rotateY (-240deg); преобразуване: translateZ (-182px) rotateY (-240deg); } 82,5%, 100% {-webkit-transform: translateZ (-182px) rotateY (-360deg); преобразуване: translateZ (-182px) rotateY (-360deg); }}С това готово, нека да видим как изглежда нашата анимирана въртележка в нашия браузър:
Както виждаме, той е доста прост, но изпълнява своята функционалност и е още по -добре, без да използва един ред код в JavaScriptОстава само всеки да вземе примера и да експериментира малко с него, увеличавайки размера му, добавяйки изображения и променяйки стила на въртележката, нещо, което е напълно възможно поради начина, по който е построена.
