html5 css 3d轉換和div像手風琴一樣堆積

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/ - 又一個類似於你想要的效果。

希望這會有所幫助。