欢迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

上章节回顾

我们通过对transform深入挖掘，实现了一个简单的VR 3D场景的旋转效果。其中，两个必要条件确定我们的视野范围。

通过对css3transform的封装，形成了自己的操作transform的函数。

本章目标

1. 3D折纸的基础布局
2. 封装自己的折纸类

先来看我们今天要实现的效果吧

从gif图中我们可以看出来，有一个div里面有N个子元素div，然后将一张图片作为背景图依次做为子元素div的背景图，依次定位拼合成一张完整的图片。

巧妙的布局

这里需要注意的是。看到这种效果，我们一般会这样去布局：

<div class='box'>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
</div>

很遗憾，这样行不通的，一个个旋转拼接，一个两行还行，划分的多了就难了，当然你可以用三角函数去计算，不过这样就没必要了。

我的思路：

将里面的div依次嵌套，旋转一个，其子元素也会跟着旋转。比如：

我们依次嵌套了4个div，然后设置样式，让他们叠在一起，然后让分别设置他们的left让他们一字排开来

注意：要使子元素都有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图的效果啦。

总结：

1. 3D折纸的基本布局，建议使用层层嵌套的方式，因为其它的方式我也会。
2. 将图片拆成N份位次叠加在各种子元素上，拼成一张完整的图片。
3. 因为父级的旋转会影响子元素的旋转，我们将子元素一层层来回旋转。从第三次往后，旋转的角度应该是一个对称的关系。大家可以拿到实际的demo后自行调整看效果
4. 针对折纸效果作一个类的封装，封装的思路就是按照我们前面的基础布局一步步的实现

这里是【畅哥聊技术】CSS3专题的系列文章，更多精彩内容持续更新中……

未完待续。。。