Perfecting prospettiva - css effetto pieghevole

Question

http://codepen.io/stevendavisphoto/pen/xGdQBY

.image { 
 
    width:600px; 
 
    height:200px; 
 
    overflow:hidden; 
 
} 
 
.pane1, 
 
.pane2, 
 
.pane3, 
 
.pane4 { 
 
    height:100%; 
 
    float:left; 
 
    background-image:url('http://img06.deviantart.net/22c0/i/2013/256/a/e/san_francisco_skyline_by_stevendavisphoto-d6m7285.jpg'); 
 
    background-size:cover; 
 
} 
 
.pane1 { 
 
    background-position:0 0; 
 
    width:25%; 
 
} 
 
.folder1, 
 
.folder2 { 
 
    height:100%; 
 
    float:left; 
 
    -webkit-backface-visibility:hidden; 
 
    -webkit-transition:all 1s linear; 
 
    -webkit-transform-origin:left center; 
 
} 
 
.folder1 { 
 
    width:50%; 
 
    -webkit-transform: perspective(300px) rotateY(90deg); 
 
} 
 
.image:hover .folder1 { 
 
    -webkit-transform: perspective(300px) rotateY(0deg); 
 
} 
 
.black { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:50%; 
 
    bottom:0; 
 
    background:black; 
 
    opacity:0.5; 
 
    z-index:99; 
 
    -webkit-backface-visibility:hidden; 
 
    transition:opacity 1s linear; 
 
} 
 
.image:hover .black { 
 
    opacity:0; 
 
} 
 
.pane2 { 
 
    background-position:33.33% 0; 
 
    width:50%; 
 
} 
 
.folder2 { 
 
    width:50%; 
 
    -webkit-transform: perspective(150px) rotateY(-90deg); 
 
} 
 
.image:hover .folder2 { 
 
    -webkit-transform: perspective(150px) rotateY(0deg); 
 
} 
 
.folder2 .black { 
 
    right:0; 
 
} 
 
.pane3 { 
 
    background-position:66.67% 0; 
 
    width:100%; 
 
} 
 
.pane4 { 
 
    background-position:100% 0; 
 
    width:25%; 
 
    -webkit-transition:all 1s linear; 
 
    -webkit-transform:translateX(-200%); 
 
} 
 
.image:hover .pane4 { 
 
    -webkit-transform:translateX(0); 
 
}

<div class="image"> 
 
    <div class="pane1"></div> 
 
    <div class="folder1"> 
 
    <div class="black"></div> 
 
    <div class="pane2"></div> 
 
    <div class="folder2"> 
 
     <div class="black"></div> 
 
     <div class="pane3"></div> 
 
    </div> 
 
    </div> 
 
    <div class="pane4"></div> 
 
</div>

Sto cercando di rendere questo effetto di piegatura perfetto. Il lato destro della piega interna "pane3" non si allinea in modo realistico con il lato sinistro di "pane4". Qualcuno può aiutarmi qui? Sono un po 'nuovo alle trasformazioni prospettiche. Grazie!

Answer 1

Un'opzione è spostare folder2 all'esterno di folder1 e trasformarlo in modo indipendente, anziché cercare di farlo all'interno di folder1. Ruota il folder2 sul suo lato destro invece che a sinistra.

.image { 
 
    width:600px; 
 
    height:200px; 
 
    overflow:hidden; 
 
} 
 
.pane1, 
 
.pane2, 
 
.pane3, 
 
.pane4 { 
 
    height:100%; 
 
    float:left; 
 
    background-image:url('http://img06.deviantart.net/22c0/i/2013/256/a/e/san_francisco_skyline_by_stevendavisphoto-d6m7285.jpg'); 
 
    background-size:cover; 
 
} 
 
.pane1 { 
 
    background-position:0 0; 
 
    width:25%; 
 
} 
 
.folder1, 
 
.folder2 { 
 
    height:100%; 
 
    float:left; 
 
    -webkit-backface-visibility:hidden; 
 
    -webkit-transition:all 1s linear; 
 
    -webkit-transform-origin:left center; 
 
} 
 
.folder1 { 
 
    width:25%; 
 
    -webkit-transform: perspective(300px) rotateY(90deg); 
 
} 
 
.image:hover .folder1 { 
 
    -webkit-transform: perspective(300px) rotateY(0deg); 
 
} 
 
.black { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background:black; 
 
    opacity:0.5; 
 
    z-index:99; 
 
    -webkit-backface-visibility:hidden; 
 
    transition:opacity 1s linear; 
 
} 
 
.image:hover .black { 
 
    opacity:0; 
 
} 
 
.pane2 { 
 
    background-position:33.33% 0; 
 
    width:100%; 
 
} 
 
.folder2 { 
 
    width:25%; 
 
    -webkit-transform-origin: right center; 
 
    -webkit-transform: translateX(-200%) perspective(300px) rotateY(-90deg); 
 
} 
 
.image:hover .folder2 { 
 
    -webkit-transform: translateX(0) perspective(300px) rotateY(0deg); 
 
} 
 
.folder2 .black { 
 
    right:0; 
 
} 
 
.pane3 { 
 
    background-position:66.67% 0; 
 
    width:100%; 
 
} 
 
.pane4 { 
 
    background-position:100% 0; 
 
    width:25%; 
 
    -webkit-transition:all 1s linear; 
 
    -webkit-transform:translateX(-200%); 
 
} 
 
.image:hover .pane4 { 
 
    -webkit-transform:translateX(0); 
 
}

<div class="image"> 
 
    <div class="pane1"></div> 
 
    <div class="folder1"> 
 
    <div class="black"></div> 
 
    <div class="pane2"></div> 
 
    </div> 
 
    <div class="folder2"> 
 
    <div class="black"></div> 
 
    <div class="pane3"></div> 
 
    </div> 
 
    <div class="pane4"></div> 
 
</div>

Answer 2

Non è un problema di prospettiva, è un problema sulla sincronizzazione di un movimento lineare (quello del Cartella4) con il risultato di 2 rotazioni.

Ciò implicherebbe un difficile calcolo.

Invece, andare avanti con la vostra idea di elementi di raggruppamento un passo oltre, e impostare Cartella4 come un bambino di Folder3

Nel mio frammento, ho impostato la trasformazione in senso opposto, è più facile vedere come funziona in questo modo.

Inoltre, ho ruotato la base, in modo da poter vedere in profondità che gli elementi si muovono come dovrebbero. Basta rimuovere la rotazione di base e impostare la prospettiva che si desidera lì.

body { 
 
    perspective: 300px; 
 
    perspective-origin: 300px 100px; 
 
} 
 
.image { 
 
    height: 200px; 
 
    width: 800px; 
 
    position: relative; 
 
    transform: rotateX(40deg); 
 
} 
 

 
div { 
 
    transform-style: preserve-3d; 
 
    transition: transform 10s; 
 
    transform-origin: left center; 
 
} 
 

 
.pane1, 
 
.pane2, 
 
.pane3, 
 
.pane4 { 
 
    height:100%; 
 
    width: 200px; 
 
    background-image: url('http://img06.deviantart.net/22c0/i/2013/256/a/e/san_francisco_skyline_by_stevendavisphoto-d6m7285.jpg'); 
 
    background-size: 800px; 
 
    position: absolute; 
 
} 
 

 
.pane2, 
 
.pane3, 
 
.pane4 { 
 
    left: 200px; 
 
} 
 

 
.pane2 { 
 
    background-position: -200px 0px; 
 
} 
 

 
.pane3 { 
 
    background-position: -400px 0px; 
 
} 
 

 
.pane4 { 
 
    background-position: -600px 0px; 
 
} 
 

 
.image:hover .pane2 { 
 
    transform: rotateY(90deg); 
 
} 
 

 
.image:hover .pane3 { 
 
    transform: rotateY(-180deg); 
 
} 
 

 
.image:hover .pane4 { 
 
    transform: rotateY(90deg); 
 
}

<div class="image"> 
 
    <div class="pane1"> 
 
     <div class="pane2"> 
 
      <div class="pane3"> 
 
       <div class="pane4"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>