Улучшающая перспектива - сгибающий эффект css

Ответ 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>

Ответ 2

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

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

Вместо этого переходите к идее о вложении элементов на один шаг дальше и установите folder4 как дочерний элемент папки3

В моем фрагменте я установил преобразование в обратном порядке, легче понять, как это работает.

Кроме того, я повернул базу, чтобы вы могли глубже понять, что элементы движутся так, как должны. Просто удалите вращение базы и установите перспективу, которую вы хотите там.

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>