完善透视——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

这不是透视问题，而是将线性运动（文件夹4的运动）与 2 次旋转的结果同步的问题。

这意味着计算困难。

相反，继续你的嵌套元素的想法，将文件夹 4 设置为文件夹 3 的子级

在我的 sn-p 中，我以相反的方式设置了变换，这样更容易看出它是如何工作的。

此外，我已经旋转了底座，以便您可以深入地看到元素正在按应有的方式移动。 只需移除基本旋转并在那里设置您想要的透视图。

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>

Answer 2

一种选择是将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>