Flippare due immagini diverse e fermarsi al volo stazionario

L'idea è di creare un'animazione infinita su CSS che mostrerà due lati di una carta che gira tutto il tempo e di fermare l'animazione al passaggio del mouse, rivelando solo il fronte e aumentando la dimensione 20 % con un collegamento ad un'altra sezione.Flippare due immagini diverse e fermarsi al volo stazionario

Sono in grado di capovolgere e crescere fino alla seconda immagine al passaggio del mouse, ma non riesco a sostituire l'azione su un'animazione di fotogrammi chiave.

Questo è quello che ho finora:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
.panel { 
    width: 300px; 
    height: 300px; 
    margin: auto; 
    position: relative; 
} 
.card { 
    width: 100%; 
    height: 100%; 
    -o-transition: all .5s; 
    -ms-transition: all .5s; 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -webkit-backface-visibility: hidden; 
    -ms-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    -webkit-animation: CardFlip 5s infinite; 
} 
.front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    background-image: url('http://placehold.it/300x300/red'); 

} 
.back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    transform: rotateY(-180deg); 
    background-image: url('http://placehold.it/300x300/blue'); 

} 
.panel:hover .front { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
} 
.panel:hover .back { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
} 

@-webkit-keyframes CardFlip { 
    0% { 
position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 2; 
    -webkit-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    transform: rotateY(0deg); 
    -webkit-transform: scale(1.2,1.2); 
    -ms-transform: scale(1.2,1.2); 
    -moz-transform: scale(1.2,1.2); 
    transform: scale(1.2,1.2); 
    } 
    100% { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    transform: rotateY(180deg); 
    } 
} 
</style> 
</head> 
<body> 
<br>   
<br>  
<div class="panel"> 
    <div class="front card"> 
    </div> 
    <div class="back card"> 
    </div> 
</div> 
</body>

fonte

2014-07-09 JFD

La proprietà 'z-index' non verrà applicata ai selettori a meno che non si includa anche la proprietà' position'. – TylerH

(Grazie per aver risposto) Impostando la proprietà posizione come: posizione: assoluta; superiore: 0px; sinistra: 0px; Devo modificarlo? – JFD

Tutto quello che voglio dire è che hai diversi selettori che includono dichiarazioni di valore 'z-index'. Questi selettori devono anche ** tutti ** includere una dichiarazione 'position', che sia' relativa', 'absolute' o' fixed', in modo che 'z-index' funzioni. – TylerH

Credo che è necessario aggiungere backface-visibility: hidden; solo per carta di fronte.

Se è necessario che l'animazione abbia un aspetto infinito, è necessario avere punti simili 0% e 100%.

Inoltre, ti era mancata la proprietà transform-style: preserve-3d;.

Inoltre, ho aggiunto un altro contenitore per evitare l'animazione sulle carte. Penso che sia più semantico.

Partenza questo violino: http://jsfiddle.net/nikoloza/2zrk7/

Aggiornamento

Se aggiungiamo perspective: 1000 al contenitore principale, ci arriveremo reale effetto 3D. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/1/

Update 2

E se abbiamo bisogno solo da sinistra a destra flipping possiamo impostare 360deg invece di 0deg in 100 punti% nell'animazione. Fiddle: http://jsfiddle.net/nikoloza/2zrk7/2/

fonte

2014-07-16 01:29:51 nikoloza

Grazie mille! Vado con l'aggiornamento 2! Ora proverò a mostrare e ad aumentare le dimensioni di ogni immagine al passaggio del mouse, invece di mostrare solo il fronte ... Voglio dire, se passerò il mouse sulla parte anteriore per mostrare il fronte, e se passerò il mouse sul retro per mostrare il indietro ... Grazie per tutto il vostro aiuto Ragazzi siete fantastici! – JFD

Ah, ok. Fammi sapere se hai problemi con questo. – nikoloza

Non sono stato in grado di farlo funzionare su IExplorer o Firefox, qualche idea? – JFD

Flippare due immagini diverse e fermarsi al volo stazionario

risposta

Problemi correlati