Question

我想将div叠加在一个垂直堆栈中，然后应用一些css3 3d变换来稍微“折叠”它们，但是，当我尝试这样做时，我可以将div转换为在它们的X上旋转轴，但旋转后每个div之间有一个间隙，因为div不会相互折叠，可以实现吗？

举个例子：http://www.papercraftsforchildren.com/wp-content/uploads/2010/04/garland2.jpg这个图像显示了我想要的东西（尽管这是水平的，而不是垂直的）。

我希望这是有道理的。

编辑：这是一些代码（正在进行的工作）：

.stripContainer {
    width: 80px;
    -webkit-transform-style: preserve-3d;
    -webkit-animation: spin 10s infinite linear;
}

.edge_a {
    float: left;
    width: 20px;
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
}

.edge_b {
    float: left;
    width: 20px;
    -webkit-transform: rotateX(0deg) rotateY(15deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
}

.edge_c {
    float: left;
    width: 20px;
    -webkit-transform: rotateX(0deg) rotateY(30deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
}

.edge_d {
    float: left;
    width: 20px;
    -webkit-transform: rotateX(0deg) rotateY(45deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
}

.edge_a_b {
    -webkit-transform-origin: bottom center 0;
    -webkit-transform: rotateX(95deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
}

.edge_b_b {
    -webkit-transform-origin: bottom center 0;
    -webkit-transform: rotateX(95deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
}

#frame2 {
    perspective: 900;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(15deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px)
}

和HTML

<div id="frame2" style="padding-left: 200px">
<div class="stripContainer">
    <div class="edge_a">
        <div class="edge_a_d" style="width:20px; height: 50px; background-color: red"></div>
        <div class="edge_a_c" style="width:20px; height: 30px; background-color: blue"></div>
        <div class="edge_a_b" style="width:20px; height: 30px; background-color: green"></div>
        <div class="edge_a_a" style="width:20px; height: 150px; background-color: orange"></div>
    </div>
    <div class="edge_b">
        <div class="edge_b_d" style="width:20px; height: 50px; background-color: red"></div>
        <div class="edge_b_c" style="width:20px; height: 30px; background-color: blue"></div>
        <div class="edge_b_b" style="width:20px; height: 30px; background-color: green"></div>
        <div class="edge_b_a" style="width:20px; height: 150px; background-color: orange"></div>
    </div>
    <div class="edge_c">
        <div class="edge_c_d" style="width:20px; height: 50px; background-color: red"></div>
        <div class="edge_c_c" style="width:20px; height: 30px; background-color: blue"></div>
        <div class="edge_c_b" style="width:20px; height: 30px; background-color: green"></div>
        <div class="edge_c_a" style="width:20px; height: 150px; background-color: orange"></div>
    </div>
    <div class="edge_d">
        <div class="edge_d_d" style="width:20px; height: 50px; background-color: red"></div>
        <div class="edge_d_c" style="width:20px; height: 30px; background-color: blue"></div>
        <div class="edge_d_b" style="width:20px; height: 30px; background-color: green"></div>
        <div class="edge_d_a" style="width:20px; height: 150px; background-color: orange"></div>
    </div>
</div>
</div>

Answer 1

查看以下资源，这些资源类似于您想要的效果。

http://oridomi.com/#example-reveal

http://oridomi.com/#example-stairs

http://oridomi.com/#example-accordion

您必须单击并拖动场景中的元素才能获得效果。

http://photon.attasi.com/ - 还有一个类似于你想要的效果。

希望这有帮助。

html5 css 3d转换和div叠加就像一个手风琴

1 个答案: