Come creare 3D pulsante Flip Animazioni con CSS
Capovolgere le animazioni sono popolari effetti CSS che mostrano sia davanti che dietro di un elemento HTML ruotandoli dall'alto verso il basso o da sinistra verso destra (e viceversa). Sono rad in 2 dimensioni, ma sono ancora più freschi quando vengono eseguiti in 3D.
In questo post, ti mostrerò come crea semplici pulsanti 3D, e aggiungi animazioni flip a loro.
Puoi vedere il risultato nella demo qui sotto, se fai clic sui pulsanti, eseguiranno l'animazione flip etichettata.
1. Creazione dell'HTML per il pulsante 3D
Per creare un pulsante 3D (con Top → Bottom flip), prima ne impiliamo tre Abbiamo impostato il Aggiungiamo immagini di sfondo alle facce dei pulsanti anteriore e posteriore e impostiamo un gradiente lineare freddo dietro le immagini per entrambi. Il trucco qui è che in CSS, puoi impostare più immagini come immagine di sfondo per lo stesso elemento, e puoi anche dichiarare i gradienti come immagini di sfondo. La faccia centrale, A coprire lo spazio tra le facce anteriore e posteriore con quella centrale, noi stendi la faccia centrale piatta attraverso il piano x dello spazio 3D usando il Poiché la faccia centrale è stata posizionata piatta sul piano x, il suo punto più alto sull'asse y scende di 10px (metà della sua altezza) rispetto all'originale. Quindi, per rimetterlo in posizione e allinearne la parte superiore con le altre due facce del pulsante, ho aggiunto il Ho usato il Finora, vedrai solo la faccia anteriore sullo schermo, poiché il piano x è nascosto alla vista e sul piano y (schermo) l'ultima faccia appoggiata era quella frontale. Ruotando il pulsante sarai in grado di vedere anche le altre facce. La proprietà CSS stile di trasformazione determina se gli elementi figlio di un elemento HTML vengono visualizzati piatti o posizionati nello spazio 3D. Nel frammento di codice qui sotto, il Nota che l'ho usato Comunque nel passaggio successivo lo cambieremo A questo punto, il nostro pulsante 3D non è ancora animato. Possiamo farlo usando il Facciamo ruotare il pulsante solo al passaggio del mouse, quindi al posto di Si noti che nel repository Github, I aggiunta una casella di controllo a ciascun pulsante per accendere l'animazione .flipBtn contenitore che funzionerà come pulsante 3D e posizioneremo il pulsante 3D nel .flipBtnWrapper involucro.
2. Aggiunta di stili di base con CSS
larghezza e altezza proprietà del wrapper, del pulsante e delle facce del pulsante e posizionarle utilizzando la tecnica di posizionamento relativo / assoluto. .flipBtnWrapper width: 200px; altezza: 200 px; posizione: relativa; .flipBtn, .flipBtn_face width: 100%; altezza: 100%; posizione: assoluta;
3. Modella i 3 volti dei pulsanti
.flipBtn_mid, è dato a altezza di 20px e viene creato uno stesso spazio di 20 px tra le facce anteriore e posteriore. Raggiungiamo quest'ultimo utilizzando il translateZ () Funzione CSS che muove un elemento lungo l'asse z. Spingiamo indietro la faccia posteriore di 10 px e la faccia anteriore in avanti di 10 px. .flipBtn_front background-image: url ("immagine / css-3d-flip-button-animation-play.png"), sfumatura lineare (# FF6366 50%, # FEA56E); backface-visibility: hidden; transform: translateZ (10px); .flipBtn_back background-image: url ("immagine / css-3d-flip-button-animation-pause.png"), sfumatura lineare (# FF6366 50%, # FEA56E); colore di sfondo: blu; transform: translateZ (-10px); .flipBtn_mid height: 20px; background-color: # d5485a; transform: ruotareX (90deg); inizio: -10px; transform: ruotareX (90deg); regola questo lo rende perpendicolare a entrambe le facce del pulsante anteriore e posteriore sul piano y.inizio: -10px regola pure.controfaccia visibilità Proprietà CSS per la faccia anteriore, quindi quando si capovolge il pulsante, la parte posteriore della faccia anteriore non sarà visibile.
4. Rotazione del pulsante
transform-style: preserve-3d; regola dà volume 3D al nostro pulsante, mentre il trasformare: ruotarexX () proprietà lo ruota attorno all'asse x. .flipBtn transform-style: preserve-3d; transform: ruotareX (-120 gradi);
-120deg esclusivamente a scopo dimostrativo, in questo modo è più semplice illustrare come funziona la rotazione dei pulsanti.
-180deg per far girare completamente il pulsante.5. Animazione del pulsante
transizione proprietà. Noi usiamo il trasformare proprietà per il primo valore, poiché questa è la proprietà per cui vogliamo applicare l'effetto di transizione. Il secondo valore, è la durata, 2s..flipBtn selettore, usiamolo .flipBtnWrapper: hover .flipBtn. Come accennato in precedenza, cambia anche il valore di rotateX () a -180deg per far girare il pulsante. .flipBtn transition: transform 2s; transform-style: preserve-3d; .flipBtnWrapper: hover .flipBtn transform: ruateX (-180deg);
: selezionata piuttosto che su : hover, in questo modo si comporta più come un pulsante reale. Ho anche incluso quattro pulsanti diversi con quattro direzioni (in alto → in basso, in basso → in alto, a destra → a sinistra e a sinistra → a destra), in modo da poter usare facilmente quello che vuoi.
