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

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

awk 'FNR==NR{A[$1]=$2;next}s=$2 in A{ $3=A[$2] }s' FS='|' OFS='|' file2 file1

Answer 2

这不是透视问题，它是关于将线性运动（文件夹4的运动）与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>

完善视角 - css折叠效果

2 个答案: