在开发过程中，经常会遇到一些交互效果，今天所联系的便是一个类似折纸的折叠效果，查看效果.
说到折纸，我们先看下图
这是我第一时间想到的大体思路，如果能让这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>