Jak tworzyć animacje przerzucania przycisków 3D za pomocą CSS
Odwróć animacje są popularne efekty CSS, które pokazują zarówno z przodu, jak iz tyłu elementu HTML, obracając je od góry do dołu lub od lewej do prawej (i odwrotnie). Są rad w dwóch wymiarach, ale są nawet chłodniejsze, gdy są wykonywane w 3D.
W tym poście pokażę ci, jak to zrobić tworzyć proste przyciski 3D, i dodaj animacje z klapką do nich.
Możesz zobaczyć wynik na poniższej wersji demonstracyjnej, jeśli klikniesz na przyciski, wykonają animowaną klapkę.
1. Tworzenie kodu HTML dla przycisku 3D
Aby utworzyć przycisk 3D (z górną → dolną klapką), najpierw układamy trzy Ustawiamy Dodajemy obrazy tła do przednich i tylnych powierzchni przycisków i ustawiamy chłodny gradient liniowy za obrazami dla obu. Sztuczka polega na tym, że w CSS można ustawić wiele obrazów jako obraz tła dla tego samego elementu, a także można zadeklarować gradienty jako obrazy tła. Środkowa twarz, Do zakryć przestrzeń między przednią i tylną twarzą środkową, my połóż środkową twarz płasko w poprzek płaszczyzny X przestrzeni 3D za pomocą Ponieważ środkowa powierzchnia została ułożona płasko na płaszczyźnie x, jej górny punkt na osi y idzie 10px (połowa jego wysokości) w dół od oryginału. Więc, aby wyciągnąć go z powrotem i wyrównać jego górę z dwoma innymi twarzami przycisków, dodałem Użyłem Jak dotąd zobaczysz tylko przednią powierzchnię na ekranie, ponieważ płaszczyzna x jest ukryta przed widokiem, a na płaszczyźnie y (ekranie) ostatnia położona twarz była przednia. Obracając przycisk będziesz mógł zobaczyć także inne twarze. Właściwość CSS w stylu transformacji określa, czy elementy potomne elementu HTML są wyświetlane jako płaskie, czy umieszczone w przestrzeni 3D. We fragmencie kodu poniżej Zauważ, że użyłem Jednak w następnym kroku zmienimy go na W tym momencie nasz przycisk 3D nadal nie jest animowany. Możemy to zrobić za pomocą Sprawmy, aby przycisk obracał się tylko na zawisie, a nie na Zauważ, że w repozytorium Github I dodano pole wyboru do każdego przycisku w celu odpalenia animacji .flipBtn pojemnik, który będzie działał jako przycisk 3D i umieścimy przycisk 3D w .flipBtnWrapper obwoluta.
2. Dodawanie podstawowych stylów za pomocą CSS
szerokość i wysokość właściwości opakowania, przycisku i powierzchni przycisków i ustawiają je za pomocą techniki pozycjonowania względnego / bezwzględnego. .flipBtnWrapper width: 200px; wysokość: 200px; pozycja: względna; .flipBtn, .flipBtn_face szerokość: 100%; wysokość: 100%; pozycja: absolutna;
3. Stylizuj 3 twarze przycisków
.flipBtn_mid, otrzymuje a wysokość 20px i taka sama przestrzeń 20px jest tworzona między przednią i tylną powierzchnią. Osiągamy to za pomocą translateZ () Funkcja CSS przesuwa element wzdłuż osi Z.. Odsuwamy tylną twarz o 10px i zbliżamy frontową twarz do przodu o 10px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), gradient liniowy (# FF6366 50%, # FEA56E); widoczność z tyłu: ukryta; transform: translateZ (10px); .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), gradient liniowy (# FF6366 50%, # FEA56E); kolor tła: niebieski; transform: translateZ (-10px); .flipBtn_mid height: 20px; kolor tła: # d5485a; transformacja: rotateX (90deg); top: -10px; transformacja: rotateX (90deg); rządzić tym sprawia, że jest prostopadły zarówno na przedniej, jak i tylnej stronie przycisku na płaszczyźnie y.top: -10px zasada również.widoczność z tyłu Właściwość CSS dla przedniej ściany, więc gdy naciśniemy przycisk, tył przedniej powierzchni nie będzie widoczny.
4. Obracanie przycisku
transform-style: preserve-3d; reguła daje objętość 3D naszemu przyciskowi, natomiast transformacja: rotatexX () właściwość obraca ją wokół osi x. .flipBtn transform-style: preserve-3d; transformacja: rotateX (-120deg);
-120deg wyłącznie do celów demonstracyjnych, ponieważ w ten sposób łatwiej jest zilustrować działanie rotacji przycisków.
-180 stopni aby przycisk całkowicie się odwrócił.5. Animowanie przycisku
przejście własność. Używamy przekształcać właściwość dla pierwszej wartości, ponieważ jest to właściwość, dla której chcemy zastosować efekt przejścia. Druga wartość to czas trwania, 2s..flipBtn selektor, użyjmy .flipBtnWrapper: hover .flipBtn. Jak wspomniano wcześniej, zmień również wartość rotateX () do -180 stopni aby obrócić przycisk. .flipBtn przejście: transform 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
:sprawdzone raczej niż na :wahać się, w ten sposób zachowuje się bardziej jak prawdziwy przycisk. Dołączyłem również cztery różne przyciski z czterema kierunkami (Góra → Dół, Dół → Góra, Prawo → Lewo i Lewo → Prawo), dzięki czemu możesz łatwo używać tego, co chcesz.
