Hoe maak je 3D Button Flip animaties met CSS

s op elkaar, twee voor de voor- en achterkant van de knop en een derde voor het vullen van de diepte in het midden. We plaatsen de drie .flipBtn in de .flipBtn container die als de 3D-knop zal functioneren en we plaatsen de 3D-knop in de .flipBtnWrapper wrapper.

2. Basisstijlen toevoegen met CSS

We stellen de eigenschappen width en height van de wrapper, de knop en de knopvlakken in en positioneren deze met de relatieve / absolute positioneringstechniek.

 .flipBtnWrapper {width: 200px; hoogte: 200 px; positie: relatief; } .flipBtn, .flipBtn_face {width: 100%; hoogte: 100%; positie: absoluut; } 

3. Stijl de 3 knopvlakken

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 vlak, .flipBtn_mid, krijgt een height van 20 px, en eenzelfde ruimte van 20 px wordt gecreëerd tussen de voor- en achterkant. We bereiken dit laatste door de translateZ() CSS-functie te gebruiken die een element langs de z-as verplaatst . 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"), lineair verloop (# FF6366 50%, # FEA56E); achtergrondkleur: blauw; transformatie: translateZ (-10px); } .flipBtn_mid {height: 20px; achtergrondkleur: # d5485a; transformeren: rotateX (90deg); top: -10px; } 

Om de ruimte tussen de voor- en achterzijden af ​​te dekken met de middelste, leggen we het middelste vlak vlak langs het x-vlak van de 3D-ruimte met behulp van de transform: rotateX(90deg); regel die het loodrecht op zowel de voorkant als de achterkant van de knop gezichten op het y-vlak maakt.

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 top: -10px, heb ik ook de top: -10px regel toegevoegd.

Ik heb de backface-visibility CSS-eigenschap voor de voorkant gebruikt, dus wanneer we de knop omdraaien, is de achterkant van de voorkant niet zichtbaar.

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 voorste gelaat de voorkant. Door de knop te draaien, kunt u ook de andere gezichten zien.

4. De knop draaien

De CSS-eigenschap in transform-stijl bepaalt of de onderliggende elementen van een HTML-element plat worden weergegeven of in de 3D-ruimte worden geplaatst. In het onderstaande codefragment, de transform-style: preserve-3d; regel geeft 3D-volume aan onze knop, terwijl de eigenschap transform: rotatexX() deze rond de x-as roteert.

 .flipBtn {transform-style: preserverve-3d; transformeren: rotateX (-120deg); } 

Merk op dat ik -120deg alleen voor demonstratiedoeleinden heb gebruikt, omdat het op deze manier eenvoudiger is om te illustreren hoe de -120deg werkt.

In de volgende stap zullen we dit echter veranderen naar -180deg om de knop volledig rond te laten draaien.

5. Animatie van de knop

Op dit moment is onze 3D-knop nog steeds niet geanimeerd. We kunnen dit doen door de eigenschap transition . We gebruiken de transform eigenschap voor de eerste waarde, omdat dit de eigenschap is waarvoor we het overgangseffect willen toepassen. De tweede waarde is de duur, 2s .

Laten we de knop alleen roteren bij zweven, dus laten we in plaats van de .flipBtn selector .flipBtnWrapper:hover .flipBtn . Zoals eerder vermeld, verander ook de waarde van rotateX() in -180deg om de knop rond te laten draaien.

 .flipBtn {transition: transform 2s; transformatiestijl: bewaren-3d; } .flipBtnWrapper: hover .flipBtn {transform: rotateX (-180deg); } 

Merk op dat ik in de Github repo een selectievakje aan elke knop heb toegevoegd om de animatie op te starten :checked plaats van aan :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.

• Demo bekijken
• Download de bron