css3折叠效果

在开发过程中，经常会遇到一些交互效果，今天所联系的便是一个类似折纸的折叠效果，查看效果.

说到折纸，我们先看下图

这是我第一时间想到的大体思路，如果能让这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结构

 <div class='outer'>
    <div class='red fold'>
       段落1
       <div class='yellow fold'>
           段落2
           <div class='blue fold'>
              段落3
              <div class='green fold'>

              </div>
           </div>
       </div>
    </div>
 </div>

css代码：

.outer{width:400px;margin:0px auto;-webkit-perspective:500px;-webkit-perspective-origin:% %
}
.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: }
.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：

 .outer{width:400px;margin:100px auto;
        -webkit-perspective:800px;
        -webkit-perspective-origin:% %
 }
 .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: ;
              -webkit-transition:transform linear 800ms;
 }
 .red{background-color:red;
      -webkit-transform:rotateX(90deg)
 }
 .yellow{background-color:yellow;
         -webkit-transform:rotateX(-180deg)
 }
 .blue{background-color:blue;
       -webkit-transform:rotateX(180deg);
 }
 .green{background-color:green;
        -webkit-transform:rotateX(-180deg);
 }
 .outer.activity .fold{-webkit-transform:rotateX(0deg);
 }

html：

<div class='outer'>
   <div class='red fold'>
      段落1
      <div class='yellow fold'>
          段落2
          <div class='blue fold'>
             段落3
             <div class='green fold'>

             </div>
          </div>
      </div>
   </div>
</div>

js：

var btn=document.getElementById('btn'),
    contain=document.querySelector('.outer')
    ;
btn.onclick=function(){
    contain.classList.toggle('activity')
}

当然，我们可以为不同的元素添加不同的transition-delay，来使几个面有先后的展开。