Come creare 3D pulsante Flip Animazioni con CSS

s uno sull'altro, due per le facce anteriore e posteriore del pulsante e un terzo per riempire la profondità nel mezzo. .flipBtn le tre facce dei pulsanti nel contenitore .flipBtn che funzionerà come pulsante 3D e posizioniamo il pulsante 3D nel wrapper .flipBtnWrapper .

2. Aggiunta di stili di base con CSS

Impostiamo le proprietà width e height del wrapper, del pulsante e delle facce dei pulsanti e le posizioniamo usando 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

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, .flipBtn_mid, ha height di 20px e viene creato uno stesso spazio di 20px tra le facce anteriore e posteriore. Raggiungiamo quest'ultimo utilizzando la funzione translateZ() CSS che sposta 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 (90 gradi); inizio: -10px; } 

Per coprire lo spazio tra le facce anteriore e posteriore con quella centrale, posizioniamo la faccia centrale piatta sul piano x dello spazio 3D usando la transform: rotateX(90deg); regola che lo rende perpendicolare alle facce dei pulsanti anteriore e posteriore sul piano y.

Dato che 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 anche la parte top: -10px .

Ho usato la proprietà CSS di backface-visibility facciale per la faccia anteriore, quindi quando giriamo il pulsante, la parte posteriore della faccia anteriore non sarà visibile.

Finora, vedrai solo la faccia frontale 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 gli altri volti.

4. Rotazione del pulsante

La proprietà CSS stile di trasformazione determina se gli elementi figlio di un elemento HTML vengono visualizzati piatti o posizionati nello spazio 3D. Nello snippet di codice seguente, lo transform-style: preserve-3d; regola dà volume 3D al nostro pulsante, mentre la proprietà transform: rotatexX() ruota attorno all'asse x.

 .flipBtn {transform-style: preserve-3d; transform: ruotareX (-120 gradi); } 

Nota che ho usato -120deg esclusivamente a scopo dimostrativo, in questo modo è più semplice illustrare come funziona la rotazione dei pulsanti.

Tuttavia nel prossimo passaggio lo cambieremo a -180deg per far girare completamente il pulsante.

5. Animazione del pulsante

A questo punto, il nostro pulsante 3D non è ancora animato. Possiamo farlo usando la proprietà di transition . Utilizziamo la proprietà transform per il primo valore, poiché questa è la proprietà per cui vogliamo applicare l'effetto di transizione. Il secondo valore, è la durata, 2s secondi.

Facciamo ruotare il pulsante solo al passaggio del mouse, quindi anziché il selettore .flipBtn, usiamo .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); } 

Si noti che nel repository Github, ho aggiunto una casella di controllo a ciascun pulsante per attivare l'animazione :checked anziché su :hover passa il :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.

• Visualizza la demo
• Scarica fonte