完善的視角 - CSS摺疊效果

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>

我試圖使這個摺疊效果完美。 「pane3」內部摺疊的右側與「pane4」的左側不符合實際。有人能幫我一下嗎？我對透視轉換很陌生。謝謝！

Answer 1

一種選擇是將folder2移動到folder1之外並獨立轉換，而不是嘗試在folder1之內執行。圍繞它的右邊緣而不是左邊旋轉folder2。

.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

它不是立體的問題，這是一個大約爲2次的循環的結果同步的線性運動（即在folder4的）問題。

這意味着一個難題微積分。

相反，繼續你的嵌套元素的想法超出了一步，並設置folder4爲folder3

在我的片段一個孩子，我已經設置以相反的方式轉換，更容易看到它以這種方式工作。

此外，我旋轉了底座，以便您可以深入瞭解元素正在移動。 只需刪除基礎旋轉並設置所需的透視圖。

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>