0

我想将 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>
4

1 回答 1

1

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

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

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

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

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

http://photon.attasi.com/ - 另一个类似于您想要的效果。

希望这可以帮助。

于 2013-05-22T09:42:23.300 回答