Имплементација ХТМЛ5 И ЦСС3 Не само да је пружио нови начин за стандардизацију елемената на страници, дајући могућност укључивања нових елемената који би обезбедили већи степен корисности у развоју веб апликација, већ је такође омогућио проширење њихових могућности, остављајући тако поред језика као што су ЈаваСцрипт за ефекте и прелазе захваљујући ЦСС3.
Очигледно постоје библиотеке ЈаваСцрипт који имају невероватне ефекте и чине њихову примену прилично једноставном, али већину времена ова функција је инкапсулирана и могућности измена су веома компликоване.
За ове случајеве можемо користити ЦСС3 и уз мало труда можемо постићи заиста невероватне ефекте и функционалности попут рингишпила, нешто што је у прошлости било могуће само са ЈаваСцрипт.
Креирање нашег вртешка
Прво ћемо укључити ХТМЛ код за наш рингишпил, који ће бити прилично једноставан, јер ће укључивати само укључивање нашег стила, ознаке која означава да ће све што се налази у њему бити графички садржај, попут фотографија, дијаграма или у овом случају наш рингишпил:
ЦСС3 рингишпилВажно је нагласити класе које смо укључили у свој див, јер ће нам оне омогућити да извршимо манипулације у нашем цсс -у. Када се то уради, прећи ћемо на имплементацију нашег стила, почевши прво тако што ћемо нашим елементима дати 3Д изглед, за то ћемо користити својство перспектива И преобразити:
.цардс {поситион: абсолуте; врх: 50%; лево: 50%; ширина: 190пк; висина: 210пк; маргина: 0; -вебкит-перспектива: 800пк; перспектива: 800пк; -вебкит-трансформ: транслате (-50%, -50%); -мс-трансформ: транслате (-50%, -50%); трансформиши: преведи (-50%, -50%); }Имајући ово, ми ћемо укључити неке анимације како бисмо му дали стил вртиља који ради према правилу које ћемо касније дефинисати, такође смо дефинисали секунде за које желимо да изврши прелазе и поставили смо положај за наше картице унутар рингишпил:
.цардс__цонтент {поситион: абсолуте; ширина: 100%; висина: 100%; -вебкит-трансформ-стиле: сачувати-3д; трансформисати-стил: сачувати-3д; -вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (0); трансформирати: транслатеЗ (-182пк) ротатеИ (0); -вебкит-анимација: рингишпил 10с бесконачан кубни-безиер (1, 0,015, 0,295, 1,225) напред; анимација: рингишпил 10с бесконачни кубни-безиер (1, 0,015, 0,295, 1,225) напред; } .цардс__елемент {поситион: абсолуте; врх: 0; лево: 0; ширина: 190пк; висина: 210пк; бордер-радиус: 6пк; }Сада ћемо радити на картици засебно користећи н-дете, ово за постављање различите боје позадине за сваки од ових и руковање прелазима за њих:
.цардс__елемент: нтх-цхилд (1) {бацкгроунд: # 394фд5; -вебкит-трансформ: ротатеИ (0) транслатеЗ (182пк); трансформисати: ротатеИ (0) транслатеЗ (182пк); } .цардс__елемент: нтх-цхилд (2) {бацкгроунд: # 39д570; -вебкит-трансформ: ротатеИ (120дег) транслатеЗ (182пк); трансформисати: ротатеИ (120дег) транслатеЗ (182пк); } .цардс__елемент: нтх-цхилд (3) {бацкгроунд: # ф0091ф; -вебкит-трансформ: ротатеИ (240дег) транслатеЗ (182пк); трансформисати: ротатеИ (240дег) транслатеЗ (182пк); }На крају смо поставили боју позадине за тело и додајемо наша правила за реч рингишпил, ово радимо са кључни кадрови који је одговоран за дефинисање кода за анимацију:
боди {позадина: # 6ц4949; } @ -вебкит-кеифрамес цароусел {0%, 17.5% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (0); трансформирати: транслатеЗ (-182пк) ротатеИ (0); } 27,5%, 45% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (-120дег); трансформирати: транслатеЗ (-182пк) ротатеИ (-120дег); } 55%, 72,5% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (-240дег); трансформирати: транслатеЗ (-182пк) ротатеИ (-240дег); } 82,5%, 100% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (-360дег); трансформирати: транслатеЗ (-182пк) ротатеИ (-360дег); }} @кеифрамес цароусел {0%, 17.5% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (0); трансформирати: транслатеЗ (-182пк) ротатеИ (0); } 27,5%, 45% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (-120дег); трансформирати: транслатеЗ (-182пк) ротатеИ (-120дег); } 55%, 72,5% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (-240дег); трансформирати: транслатеЗ (-182пк) ротатеИ (-240дег); } 82,5%, 100% {-вебкит-трансформ: транслатеЗ (-182пк) ротатеИ (-360дег); трансформирати: транслатеЗ (-182пк) ротатеИ (-360дег); }}Са овим спремним, да видимо како изгледа наш анимирани рингишпил у нашем прегледачу:
Као што видимо, прилично је једноставно, али испуњава своју функционалност и што је још боље без употребе једне линије кода у ЈаваСцриптОстаје само да сви узму пример и мало експериментишу с њим, повећавајући његову величину, додајући слике и мењајући стил рингишпила, нешто што је потпуно могуће због начина на који је направљен.
