在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用css3 transition或animation毫无压力~~ 要实现上图的这种效果,设置不同rotateX值及父元素的perspective即可,可是在实际写出来之后却发现这样并不可行,不论我们设置transform-origin或者其他的值,都不能使几个面相互一直相互连接. 再来看下图,我们折纸过程