3D трансформации и CSS анимации
С всеки урок примерите, които правим стават все по-трудни. В първия урок разгледахме как можете да създадете проста въртяща се картина. Във втория го усложнихме малко и добавихме няколко въртящи се изображения - получихме въртележка от новини. Всъщност CSS ни дава много сила, когато става въпрос за анимация. Разбира се, не винаги такива примери могат да бъдат намерени на уебсайтове. В крайна сметка малко хора ги използват. Но защо не се откроите и не сте първите, които имат привлекателна анимация на вашия сайт. Нека да е на една страница, но това вече ще ви отличава от другите сайтове.
Какво могат да направят 3D трансформациите?
Двата предишни урока, които обхващаха по-прости примери за работа с CSS анимации:
Въртящ се куб - пример
Първо, разгледайте пример за това, което ще създадем стъпка по стъпка:
Кубът се върти и на всеки спира за малко.
HTML структура
За всяка страна на куба трябва да създадем отделен блок
Вместо цифри можете да напишете текст или да вмъкнете изображение. Зависи какво и къде искате да приложите този елемент.
Какво ще кажете за CSS...
Първо, нека се заемем с ключовите кадри. Има само 6 от тях, защото имаме само 6 страни на куба. В CSS трябва да използвате проценти, за да зададете толкова много ключови кадри. Тоест в кой момент от анимацията какво трябва да се покаже. Нека да видим как изглежда без префикси:
Още веднъж искам да отбележа, че не използвам префикси, защото поради тях кодът ще се окаже много тромав.
След това дефинираме стила за сцената или контейнера, в който се намира кубът:
Отново, целият код без префикси-webkit-, -moz-, -ms-.
Остава да зададете въртенето за всяка страна:
Това е целият "ужасен" код. Можете да изтеглите готовия пример от връзката по-долу:
Е, не е ли впечатляващо? Според мен много готин ефект. И всичко това без използването на Javascript, въпреки че ще трябва да напрегнете малко мозъка си. Но само малко 🙂 !
Следващият урок ще бъде още по-интересен, макар и по-труден. Там ще видим как можете да "контролирате" топката 😉 .