Совершенствующаяся перспектива - 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

Это не проблема точки зрения, это проблема о синхронизации линейного перемещения (т.е. от Folder4) с результатом 2 вращений.

Это будет означать искушение.

Вместо этого, идти с идеей вложенности элементов один шаг вперед, и установить 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>