在開發過程中，經常會遇到一些交互效果，今天所聯系的便是一個類似折紙的折疊效果，查看效果.
說到折紙，我們先看下圖
這是我第一時間想到的大體思路，如果能讓這6個面連續的變化角度到0不就可以了嗎，運用css3 transition或animation毫無壓力~~
要實現上圖的這種效果，設置不同rotateX值及父元素的perspective即可，可是在實際寫出來之后卻發現這樣並不可行，不論我們設置transform-origin或者其他的值，都不能使幾個面相互一直相互連接。
再來看下圖，我們折紙過程實際是這樣子的，如果我們分解開來，可以分解成以下步驟，第一1,2,3在同一個平面，第二步：1為1個平面，2,3為1個平面，第三步：1,2,3分別成3個平面。我們可以這樣認為，即2,3是以一定角度從1平面折疊，3是以一定角度從2平面折疊，所以我們修改下我們的html結構
1 <div class='outer'> 2 <div class='red fold'> 3 段落1 4 <div class='yellow fold'> 5 段落2 6 <div class='blue fold'> 7 段落3 8 <div class='green fold'> 9 4 10 </div> 11 </div> 12 </div> 13 </div> 14 </div>
css代碼：
.outer{width:400px;margin:0px auto;-webkit-perspective:500px;-webkit-perspective-origin:50% 100%
}
.outer .fold{height:100px;text-align:center;line-height:100px;font-family:'Microsoft YaHei';font-size: 24px;color:#fff;-webkit-transform-style:preserve-3d;
-webkit-transform-origin:0 0}
.red{background-color:red;-webkit-transform:rotateX(50deg)}
.yellow{background-color:yellow;-webkit-transform:rotateX(-120deg)}
.blue{background-color:blue;-webkit-transform:rotateX(136deg)}
.green{background-color:green;-webkit-transform:rotateX(-120deg)}
我們得到的效果如下：
下面我們加上收縮動畫，效果看這里：
代碼如下：
css：
1 .outer{width:400px;margin:100px auto; 2 -webkit-perspective:800px; 3 -webkit-perspective-origin:50% 100% 4 } 5 .outer .fold{height:100px; 6 text-align:center; 7 line-height:100px; 8 font-family:'Microsoft YaHei'; 9 font-size: 24px; 10 color:#fff; 11 -webkit-transform-style:preserve-3d; 12 -webkit-transform-origin:0 0; 13 -webkit-transition:transform linear 800ms; 14 } 15 .red{background-color:red; 16 -webkit-transform:rotateX(90deg) 17 } 18 .yellow{background-color:yellow; 19 -webkit-transform:rotateX(-180deg) 20 } 21 .blue{background-color:blue; 22 -webkit-transform:rotateX(180deg); 23 } 24 .green{background-color:green; 25 -webkit-transform:rotateX(-180deg); 26 } 27 .outer.activity .fold{-webkit-transform:rotateX(0deg); 28 }
html：
<div class='outer'> <div class='red fold'> 段落1 <div class='yellow fold'> 段落2 <div class='blue fold'> 段落3 <div class='green fold'> 4 </div> </div> </div> </div> </div>
js：
var btn=document.getElementById('btn'), contain=document.querySelector('.outer') ; btn.onclick=function(){ contain.classList.toggle('activity') }
當然，我們可以為不同的元素添加不同的transition-delay，來使幾個面有先后的展開。