Hoe maak je 3D Button Flip-animaties met CSS
Flip animaties zijn populaire CSS-effecten die worden weergegeven zowel de voorkant als de achterkant van een HTML-element door ze van boven naar beneden of van links naar rechts (en vice versa) te draaien. Ze zijn rad in 2 dimensies, maar ze zijn zelfs koeler wanneer ze in 3D worden uitgevoerd.
In dit bericht laat ik je zien hoe maak eenvoudige 3D-knoppen, en flip-animaties toevoegen naar hen.
Als je op de knoppen klikt, kun je het resultaat in de onderstaande demo zien. Ze voeren dan de gelabelde flipanimatie uit.
1. De HTML maken voor de 3D-knop
Om een 3D-knop te maken (met Top → Bottom flip), stapelen we eerst drie We hebben de We voegen achtergrondafbeeldingen toe aan de voor- en achterknopvlakken en plaatsen een koele lineaire gradiënt achter de afbeeldingen voor beide. De truc hier is dat je in CSS meerdere afbeeldingen kunt instellen als achtergrondafbeelding voor hetzelfde element, en je kunt ook gradiënten declareren als achtergrondafbeeldingen. Het middelste gezicht, Naar bedek de ruimte tussen de voor- en achterkant gezichten met de middelste, wij leg het middelste vlak plat over het x-vlak van de 3D-ruimte met behulp van de Omdat het middelste vlak vlak over het x-vlak is gelegd, gaat het bovenste punt op de y-as 10px (de helft van de hoogte) omlaag van het origineel. Dus om het weer omhoog te trekken en de bovenkant uit te lijnen met de twee andere knopvlakken, heb ik het Ik gebruikte de Tot nu toe zie je alleen de voorkant op het scherm, omdat het x-vlak aan het zicht is onttrokken en op het y-vlak (scherm) was het laatste gezicht dat was neergelegd de voorkant. Door de knop te draaien je zult ook de andere gezichten kunnen zien. De CSS-eigenschap in transformstijl bepaalt of de onderliggende elementen van een HTML-element plat worden weergegeven of in de 3D-ruimte worden geplaatst. In het onderstaande codefragment, de Merk op dat ik gebruikte In de volgende stap zullen we dit echter veranderen Op dit moment is onze 3D-knop nog steeds niet geanimeerd. We kunnen dit doen door de Laten we ervoor zorgen dat de knop alleen tijdens zweven draait, dus in plaats van de Merk op dat ik in de Github repo een selectievakje toegevoegd aan elke knop om de animatie aan te zetten .flipBtn container die zal functioneren als de 3D-knop, en we plaatsen de 3D-knop in de .flipBtnWrapper wikkel.
2. Basisstijlen toevoegen met CSS
breedte en hoogte eigenschappen van de verpakking, de knop en de knoopvlakken, en positioneer ze met behulp van de relatieve / absolute positioneringstechniek. .flipBtnWrapper width: 200px; hoogte: 200 px; positie: relatief; .flipBtn, .flipBtn_face width: 100%; hoogte: 100%; positie: absoluut;
3. Stijl de gezichten van de 3 knoppen
.flipBtn_mid, krijgt een hoogte van 20 px, en eenzelfde ruimte van 20 px wordt gecreëerd tussen de voor- en achterkant. We bereiken de laatste door het gebruik van de translateZ () CSS-functie dat verplaatst een element langs de z-as. We duwen de achterkant 10x terug en brengen de voorkant naar voren met 10 px. .flipBtn_front background-image: url ("image / css-3d-flip-button-animation-play.png"), lineair verloop (# FF6366 50%, # FEA56E); backface-visibility: verborgen; transformatie: translateZ (10px); .flipBtn_back background-image: url ("image / css-3d-flip-button-animation-pause.png"), lineaire gradiënt (# FF6366 50%, # FEA56E); achtergrondkleur: blauw; transformatie: translateZ (-10px); .flipBtn_mid height: 20px; achtergrondkleur: # d5485a; transformeren: rotateX (90deg); top: -10px; transformeren: rotateX (90deg); regel dat maakt het loodrecht naar zowel de voor- als de terugknop op het y-vlak.top: -10px regel ook.achtervlak-zichtbaarheid CSS-eigenschap voor de voorkant, dus wanneer we de knop omdraaien, is de achterkant van de voorkant niet zichtbaar.
4. De knop draaien
transformatiestijl: behouden-3d; regel geeft 3D volume aan onze knop, terwijl de transformeren: rotatexX () eigenschap roteert het rond de x-as. .flipBtn transform-style: preserverve-3d; transformeren: rotateX (-120deg);
-120deg alleen voor demonstratiedoeleinden, omdat het op deze manier eenvoudiger is om te illustreren hoe de knoprotatie werkt.
-180 graden om de knop volledig rond te laten draaien.5. Animatie van de knop
overgang eigendom. Wij gebruiken de transformeren eigenschap voor de eerste waarde, omdat dit de eigenschap is waarvoor we het overgangseffect willen toepassen. De tweede waarde is de duur, 2s..flipBtn selector, laten we gebruiken .flipBtnWrapper: hover .flipBtn. Zoals eerder vermeld, verander ook de waarde van rotateX () naar -180 graden om de knop rond te laten draaien. .flipBtn overgang: transform 2s; transformatiestijl: behouden-3d; .flipBtnWrapper: hover .flipBtn transform: rotateX (-180deg);
: aangevinkt in plaats van op : hover, op deze manier gedraagt het zich meer als een echte knop. Ik heb ook vier verschillende knoppen met vier fliprichtingen (Boven → Onder, Onder → Boven, Rechts → Links en Links → Rechts) toegevoegd, zodat je gemakkelijk kunt gebruiken wat je wilt.
