Come creare un effetto di lancio della scheda su Div usando JavaScript

Question

Voglio creare un effetto Flip di schede (uguale alle transizioni WebKit e trasformazioni 3D) su Div utilizzando JavaScript e CSS semplici e nessuna libreria o plugin. Come posso raggiungere questo obiettivo? Poiché la maggior parte delle proprietà CSS3 funziona per i browser Webkit. E la maggior parte delle soluzioni JavaScript utilizza librerie come JQuery e i suoi plugin. Sto cercando una soluzione che non usi alcuna libreria ma solo JavaScript/CSS e funziona ancora a browser incrociato.

Qualsiasi aiuto sarebbe apprezzato.

Saluti, Manishekhawat

Answer 1

Le trasformazioni 3D in CSS3 attualmente funzionano solo sui browser Webkit. Spiacenti - Non c'è modo di farlo in altri browser senza usare un Polyfill JS come CSSSANDPAPER ( http://www.useragentman.com/blog/cssandpaper-a-css3-javascript-library/ ).

Ciò non è consigliato, poiché porterà a una grave riduzione delle prestazioni quando si carica la versione JS.

Le trasformazioni 3D e le animazioni di keyframe sono ancora una funzione (abbastanza) di zecca delle specifiche CSS3 e sono quindi adottate solo nei browser più aggiornati (Safari, Chrome). Se vuoi una soluzione di browser incrociata che non requre JavaScript dovrai sederti sui pollici per alcuni anni.

Answer 2

Come implementarlo:

Le animazioni CSS sono molto divertenti; La bellezza di loro è che attraverso molte semplici proprietà, puoi creare qualsiasi cosa, da un'elegante dissolvenza in un effetto WTF-pixar che si sarebbe comportato. Un effetto CSS da qualche parte nel mezzo è l'effetto Flip CSS, per cui c'è contenuto sia sul fronte che sul retro di un determinato contenitore. Questo tutorial ti mostrerà mostrare per creare quell'effetto in un modo il più semplice possibile.

L'HTML

La struttura HTML per realizzare l'effetto a due lati è come ci si aspetterebbe che sia:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <!-- front content -->
        </div>
        <div class="back">
            <!-- back content -->
        </div>
    </div>
</div>

Ci sono due vetri di contenuto "davanti" e "Indietro", Come ci si aspetterebbe, ma anche due elementi contenenti con ruoli molto specifici spiegati dal loro CSS. Nota anche il pezzo di ontouchstart che consente ai panni di scambiare su touchscreen.

Il CSS

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

Ecco un Panoramica approssimativa del processo:

• Il contenitore periferico imposta la prospettiva dell'area di animazione

• Il contenitore interno è l'elemento che si lancia effettivamente, che gira di 180 gradi quando il contenitore genitore viene litigato. Questo è anche dove controlli la velocità di transizione. Cambiare la rotazione in -180deg gira gli elementi nella direzione inversa.

• Gli elementi anteriori e posteriori sono posizionati assolutamente in modo che possano "sovrapporre" nella stessa posizione; La loro visibilità di backface è nascosta, quindi il retro degli elementi capovolti non viene visualizzato durante l'animazione.

• L'elemento anteriore ha un indice z più alto rispetto all'elemento posteriore, quindi l'elemento anteriore può essere codificato per primo ma viene comunque visualizzato in alto

• L'elemento posteriore è ruotare di 180 gradi, in modo da fungere da retro.

È davvero tutto quello che c'è! Metti in posizione questa semplice struttura e poi modella ogni lato come desideri!

CSS Flip Aggle

Se preferisci l'elemento Flip Only On Command tramite JavaScript, un semplice interruttore CSS farà il trucco:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper 
{
    transform: rotateY(180deg);
}

L'aggiunta della classe Flip all'elemento contenitore capovolgerà la scheda usando JavaScript, non è necessario un mouse per utente. Un commento JavaScript come

document.querySelector("#myCard").classList.toggle("flip") Farò il capovolgimento!

CSS Vertical Flip

L'esecuzione di un capovolgimento verticale è facile come capovolgere l'asse e aggiungere il valore dell'asse di origine della trasformata. L'origine del flip deve essere aggiornata e la scheda ha ruotato dall'altra parte:

.vertical.flip-container {
    position: relative;
}

    .vertical .back {
        transform: rotateX(180deg);
    }

    .vertical.flip-container .flipper {
        transform-origin: 100% 213.5px; /* half of height */
    }

    .vertical.flip-container:hover .flipper {
        transform: rotateX(-180deg);
    }

Puoi vedere che l'accesso X viene utilizzato, non la Y.

Tutto il credito va allo sviluppatore David Walsh, ho appena riprodotto il contenuto.