上章节回顾欢迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)
我们通过对transform深入挖掘，实现了一个简单的VR 3D场景的旋转效果。其中，两个必要条件确定我们的视野范围。
通过对css3transform的封装，形成了自己的操作transform的函数。
本章目标- 3D折纸的基础布局
- 封装自己的折纸类
先来看我们今天要实现的效果吧
从gif图中我们可以看出来，有一个div里面有N个子元素div，然后将一张图片作为背景图依次做为子元素div的背景图，依次定位拼合成一张完整的图片。
巧妙的布局这里需要注意的是。看到这种效果，我们一般会这样去布局：
<div class='box'> <div></div> <div></div> <div></div> <div></div> </div>
很遗憾，这样行不通的，一个个旋转拼接，一个两行还行，划分的多了就难了，当然你可以用三角函数去计算，不过这样就没必要了。
我的思路：
将里面的div依次嵌套，旋转一个，其子元素也会跟着旋转。比如：
我们依次嵌套了4个div，然后设置样式，让他们叠在一起，然后让分别设置他们的left让他们一字排开来
图片的宽高分别为520*280,分为四份每份130
注意：要使子元素都有3D变换，我们需要给每一个div添加transform-style: preserve-3d;样式。使其内部形成3D空间。
然后依次给子div设置left值，背景图片定位：
这时候的效果是这样的
关键点来了：
1）从左往右看gif图，首先，左侧第一张在hover的时候，没有任何的变化，从二个开始，我们将其绕Y轴旋转45度，我们来看效果
可以看到，后面的子元素都随着父级一起旋转了45度。
2）然后我们再来看第三张图片，它需要在父级旋转过后需要再折回来，所以它是rotateY(-90deg);
看效果
第三张图片又折回来了，到现在我们的目标效果好像有点样子了。
4）再来看第四张，又要往里折，这次是折正90deg,
最终的效果就完成啦~
我已试过：如果再分5份，10份，后面的折纸角度分别是90度和－90度，这时候为后面的函折纸类的封装就做好的铺垫。
感觉也不过如此嘛
我们已经将这个折纸的基本布局和思路都大概讲了一下，但是这样后面在实际项目中用起来可能比较繁琐。怎么办？
解决方案机智如我，已经想到了给你们封装好这样的一个函数类啦。
创建一个折纸类：Origami
class Origami{ constructor(options ){ this.el = null; this.imgUrl = null;//图片的地址 this.size = 4;//要拆成几部分 Object.assign(this, options);//将实例化的参数覆盖默认参数 this.layout(); } layout(){ // } }
整个盒子的大小和我们传入的图片的大小保持一致，将我们基础布局中的样式动态添加到style中去
var style = document.createElement('style');
动态生成我们需要的div，然后我们给里面的每一个div设置宽高背景图片的定位。
因为要将图片分成的份数是动态传入的，所以这时候写css hover就不太合适了，所以我采用的是JS事件来操作的
完整的代码请私信我
到这这个方法基本上就封装完成了。
怎么调用？
我分别调用了两次折纸效果，每张图片的细分数都不一样，这样就形成了我们最开始的gif图的效果啦。
总结：- 3D折纸的基本布局，建议使用层层嵌套的方式，因为其它的方式我也会。
- 将图片拆成N份位次叠加在各种子元素上，拼成一张完整的图片。
- 因为父级的旋转会影响子元素的旋转，我们将子元素一层层来回旋转。从第三次往后，旋转的角度应该是一个对称的关系。大家可以拿到实际的demo后自行调整看效果
- 针对折纸效果作一个类的封装，封装的思路就是按照我们前面的基础布局一步步的实现
这里是【畅哥聊技术】CSS3专题的系列文章，更多精彩内容持续更新中……
未完待续。。。
