Creazione di un effetto di apertura della scatola utilizzando solo CSS

Ho provato a creare questo effetto utilizzando le transizioni. Dovrebbe sembrare che stai aprendo una scatola.Creazione di un effetto di apertura della scatola utilizzando solo CSS

Ci sono 2 problemi:

L'ordine in cui la scatola chiusa è stesso in cui si apre. C'è comunque la possibilità di chiudere la scatola in ordine inverso rispetto alla sua apertura in modo che la scatola torni nello stesso stato in cui era chiusa?
Le estremità delle alette verdi e gialle sono nascoste durante la transizione a causa delle alette rosse e blu, quindi non sembra 3D. C'è un modo per mostrare tutti i flap in 3D?

Preferirei se la soluzione fosse in puro CSS, non JavaScript per favore.

#box { 
 
    position: relative; 
 
    top: 170px; 
 
    left: 170px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    perspective: 800px; 
 
} 
 
#flap1, #flap2, #flap3, #flap4 { 
 
    position: absolute; 
 
} 
 
#flap1 { 
 
    background-color: red; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s; 
 
} 
 
#flap2 { 
 
    left: 150px; 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform-origin: 100% 0; 
 
    transition: transform 1s ease 0.3s; 
 
} 
 
#flap3 { 
 
    background-color: green; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s ease 0.6s; 
 
} 
 
#flap4 { 
 
    background-color: yellow; 
 
    top: 150px; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 100%; 
 
    transition: transform 1s ease 0.9s; 
 
} 
 
#box:hover #flap1{ 
 
    transform: rotateY(-170deg); 
 
} 
 
#box:hover #flap2{ 
 
    transform: rotateY(170deg); 
 
} 
 
#box:hover #flap3{ 
 
    transform: rotateX(170deg); 
 
} 
 
#box:hover #flap4{ 
 
    transform: rotateX(-170deg); 
 
}

<html> 
 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 
    <body> 
 
    <div id="box"> 
 
     <div id="flap1"></div> 
 
     <div id="flap2"></div> 
 
     <div id="flap3"></div> 
 
     <div id="flap4"></div> 
 
    </div> 
 
    </body> 
 
</html>

fonte

2016-05-26 Dhruv Chadha

1. Penso che non si può. Basta aggiungere un'altra classe o qualcosa. 2.Puoi usare css3 ['perspective'] (http://www.w3schools.com/cssref/css3_pr_perspective.asp) –

Per Domanda 1:

Se si dà il ritardo in modo avanti per i :hover selettori e in ordine inverso all'interno di selettori di default, si raggiungerà l'esatto inverso animazione.

Per Domanda 2:

La correzione e la spiegazione sono i seguenti:

Per parte della durata della transizione, le caselle di verde e giallo non sembrano avere effetto 3D perché ci sono un paio di elementi con più alto z-index che viene posto sopra. Questo impedisce all'area allungata (a causa della prospettiva di ruotare) di apparire e quindi sembra che sia solo 2D (mentre in realtà non lo è). Per superare questo, abbiamo bisogno di istruire i browser per preservare l'aspetto 3D della trasformazione. Questo viene fatto usando transform-style: preserve-3d.
Quando eseguiamo la procedura sopra, i flap si apriranno tutti con un effetto 3D ma vicino all'avvio dell'animazione e alla sua fine, vedremo uno sfarfallio sullo sportellino blu quando la transizione inizia e termina effettivamente per la linguetta blu. Sembra che questo sia dovuto al fatto che lo z-index perde l'effetto quando viene utilizzata la trasformazione 3D e c'è una piccola quantità di tempo tra la perdita dell'effetto z-index e l'inizio dell'effetto preserve-3D durante il quale il lembo blu rimane temporaneamente indietro. Per risolvere questo problema, viene aggiunto l'equivalente 3D di z-index: 1 (che è translateZ(1px)). La traslazione sull'asse Z porta l'elemento più vicino di 1px all'occhio e lo tiene sopra i lembi gialli e verdi.
Infine, nonostante tutto quanto sopra, c'è un piccolo problema alla fine dell'hover-out dell'animazione, dove il lembo verde si mostra attraverso l'aletta blu. Per ovviare a ciò, avevo modificato un poco i tempi di ritardo.

(Contrariamente a quello che ho inizialmente accennato, il translateZ(0px) non è necessaria e può essere rimosso.)

#box { 
 
    position: relative; 
 
    top: 170px; 
 
    left: 170px; 
 
    width: 300px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    perspective: 800px; 
 
    transform-style: preserve-3d; 
 
} 
 
#flap1, #flap2, #flap3, #flap4 { 
 
    position: absolute; 
 
} 
 
#flap1 { 
 
    background-color: red; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform: translateZ(1px); 
 
    transform-origin: 0 0; 
 
    transition: transform 1s 1.5s; 
 
} 
 
#flap2 { 
 
    left: 150px; 
 
    background-color: blue; 
 
    width: 150px; 
 
    height: 300px; 
 
    z-index: 1; 
 
    transform: translateZ(1px); 
 
    transform-origin: 100% 0; 
 
    transition: transform 1s ease 1s; 
 
} 
 
#flap3 { 
 
    background-color: green; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 0; 
 
    transition: transform 1s ease 0.5s; 
 
} 
 
#flap4 { 
 
    background-color: yellow; 
 
    top: 150px; 
 
    width: 300px; 
 
    height: 150px; 
 
    transform-origin: 0 100%; 
 
    transition: transform 1s ease; 
 
} 
 
#box:hover #flap1 { 
 
    transform: rotateY(-170deg) translateZ(1px); 
 
    transition: transform 1s ease; 
 
} 
 
#box:hover #flap2 { 
 
    transform: rotateY(170deg) translateZ(1px); 
 
    transition: transform 1s ease 0.5s; 
 
} 
 
#box:hover #flap3 { 
 
    transform: rotateX(170deg); 
 
    transition: transform 1s ease 1s; 
 
} 
 
#box:hover #flap4 { 
 
    transform: rotateX(-170deg); 
 
    transition: transform 1s ease 1.5s; 
 
}

<div id="box"> 
 
    <div id="flap1"></div> 
 
    <div id="flap2"></div> 
 
    <div id="flap3"></div> 
 
    <div id="flap4"></div> 
 
</div>

fonte

2016-05-26 09:17:24 Harry

La buona soluzione alla prima domanda era ottima, e sebbene la seconda soluzione funzioni bene, non capisco come z- l'indice sta risolvendo il problema .... vedi, se l'indice z delle lancette rosse e blu è 1px, che è più di una scatola verde e gialla, il secondo problema dovrebbe ancora prevalere mentre le caselle verdi e gialle sono ancora al di sotto del rosso e del blu scatola ? @Harry –

@DhruvChadha: 'translateZ()' fa quasi la stessa cosa di 'z-index' per uno scenario 3D. Hai ragione sul fatto che il verde e il giallo sono ancora al di sotto del blu e del rosso, ma l'aggiunta di una trasformazione 3D comporta la creazione del livello (parte di un complicato processo di rendering) che influisce sul comportamento. Difficile da spiegare nei commenti. Proverò a dettagliarlo nella risposta. Dammi un po 'di tempo. – Harry

@DhruvChadha: Ho aggiunto alcune spiegazioni aggiuntive (e corretto un errore dalla risposta originale anche: D). Vedi se aiuta :) – Harry

Creazione di un effetto di apertura della scatola utilizzando solo CSS

risposta

Problemi correlati