Как да създадете 3D анимации с бутони с CSS
Флип анимации са популярни CSS ефекти, които показват както отпред, така и отзад на HTML елемент, като ги завъртите отгоре надолу или отляво надясно (и обратно). Те са ради в 2 измерения, но те са дори по-хладни, когато се изпълняват в 3D.
В този пост ще ви покажа как създавайте прости 3D бутони, и добавете флип анимации на тях.
Можете да видите резултата на демото по-долу, ако щракнете върху бутоните, те ще изпълнят анимацията с флип.
1. Създаване на HTML за 3D бутона
За да създадете 3D бутон (с Top → Bottom flip), първо слагаме три Ние поставяме Ние добавяме фонови изображения към лицето на предния и задния бутон и поставяме хладен линеен градиент зад изображенията. Номерът тук е, че в CSS можете да зададете множество изображения като фоново изображение за един и същ елемент, а също така можете да декларирате градиентите като фонови изображения. Средното лице, Да се покрийте пространството между предните и задните лица със средната, ние постави средната повърхност плоска през x-равнината на 3D пространството, използвайки Тъй като средната повърхност е била поставена плоско през х-равнината, нейната горна точка на у-ос отива 10px (половината от височината) надолу от оригинала. Така че, за да го издърпате нагоре и да подравните върха му с другите две бутони, добавих Използвах Досега ще виждате само лицевата страна на екрана, тъй като x-плоскостта е скрита от изгледа, а на y-равнината (екрана) последното поставено лице е предно. Чрез завъртане на бутона ще можете да видите и другите лица. Свойството CSS на стила на преобразуване определя дали дъщерните елементи на HTML елемент се показват плоски или позиционирани в 3D пространството. В кодовия фрагмент по - долу Имайте предвид, че аз използвах Но в следващата стъпка ще го променим В този момент нашият 3D бутон все още не е анимиран. Можем да направим това с помощта на Нека бутонът да се върти само на мишката, така че вместо Имайте предвид, че в Github repo, I добави отметка до всеки бутон за да се задейства анимацията .flipBtn контейнер, който ще функционира като 3D бутон, и поставяме 3D бутона в .flipBtnWrapper халат.
2. Добавяне на основни стилове с CSS
широчина и височина свойствата на обвивката, бутона и бутона на лицето и ги позиционират с помощта на техниката за относително / абсолютно позициониране. .flipBtnWrapper ширина: 200px; височина: 200px; позиция: относителна; .flipBtn, .flipBtn_face ширина: 100%; височина: 100%; позиция: абсолютна;
3. Настройте лицата на 3 бутона
.flipBtn_mid, се дава a височина от 20px, и същото пространство от 20px се създава между предната и задната страна. Ние постигаме последното с помощта на translateZ () CSS функция, която премества елемент по оста z. Насочваме гърба на лицето с 10px и придвижваме предното лице напред с 10px. .flipBtn_front фон-изображение: url ("image / css-3d-flip-button-animation-play.png"), линеен градиент (# FF6366 50%, # FEA56E); backface-видимост: скрита; transform: translateZ (10px); .flipBtn_back фон-изображение: url ("image / css-3d-flip-button-animation-pause.png"), линеен градиент (# FF6366 50%, # FEA56E); фонов цвят: син; transform: translateZ (-10px); .flipBtn_mid височина: 20px; фонов цвят: # d5485a; transform: rotateX (90deg); отгоре: -10px; transform: rotateX (90deg); правило прави перпендикулярна към лицевата и предната бутони на y-равнината.отгоре: -10px също.задната обвивка-видимост Свойството CSS за предната страна, така че когато обърнем бутона, задната част на лицевата страна няма да се вижда.
4. Завъртане на бутона
стил на трансформация: preserve-3d; Правилото дава 3D обем на нашия бутон, докато transform: rotatexX () свойството го върти около оста х. .flipBtn стил на преобразуване: preserve-3d; transform: rotateX (-120deg);
-120deg единствено за демонстрационни цели, тъй като по този начин е по-лесно да се илюстрира как работи въртенето на бутона.
-180deg за да завъртите бутона напълно.5. Анимиране на бутона
преход Имот. Ние използваме трансформиране за първата стойност, тъй като това е свойството, за което искаме да приложим ефекта на прехода. Втората стойност е продължителността, 2s..flipBtn селектор, нека използваме .flipBtnWrapper: hover .flipBtn. Както бе споменато по-рано, също така променете стойността на rotateX () да се -180deg за да завъртите бутона. .flipBtn transition: transform 2s; стил на трансформация: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: проверява вместо на : навъртам, по този начин той се държи повече като истински бутон. Също така включих четири различни бутона с четири посоки на въртене (отгоре → отдолу, отдолу → отгоре, отдясно → ляво и ляво → дясно), така че да можете лесно да използвате каквото искате.
