事情得从前两天我的另一篇文章说起，话说当时我... 算了闲话不多扯
这是文章链接：你们都被Vue惯坏了~
可以去看看，我觉得评论区比我文章本身精彩多了
我就当做是大家对我的肯定了，碰瓷也是一种能力不是~
不过还是有识货的小伙伴嘛，其实说实在的，写一篇文章如果能帮助到一个人，我觉得就很满足。
不过有件事得说一下：
- 虽然我顶着开课吧的Title，但是在掘金这个自由的平台，我的言论只代表我自己。我在团队里只是水平最菜的那一位，所以写点文章来提升一下自己。
- 另外我觉得，学习一点都不丢人，我们也正在努力去改变培训机构在大家心中的印象
- 还是继续说3D吧~
先看看3D
在上一篇文章中提到了可以用3D来处理图片很多的轮播情况，这不，不负众望，3D版来咯~
3D的话还是比较简单的，只要理解了X，Y，Z三个轴基本就没问题了，另一个就是景深，说直白点就是近大远小
要在页面上使用3D的话，就必须建立一个景深空间：perspective
比如：
body{
perspective: 1000px;
}
这样就可以在页面上建立起一个景深空间了，有了这个空间之后，我们在页面上再去做一些3D的变化就会有3D的效果了
说起css变换，2D变换估计你们都知道，就是transform属性里的translate,rotate等属性，3D变换只不过多个一个Z轴而已：translateZ, rotateX,rotateY等。
如果把图中的色块当做我们的显示屏，那么X,Y,Z轴我在图中都已经画出来了
理解了这个之后，我们再来看看三个轴的旋转有什么不同
X轴：
Y轴：
Z轴：
其余的那些位移之类的，就不在这里啰嗦了吧，估计大家也都知道，理解了这些之后，配合translateZ就可以写一个3D的正方体盒子了：
这是完整的盒子代码
也可以点这里看效果哦~ 不过由于用的是github的地址，所以不一定能打开
不过，掌握了这些，还只是个基础，要把轮播图做成3D圆环，还需要一些计算, 第一步就是把图片做成圆环，这个其实和正方形差不多，把上面和下面去掉，不就是一个圆环了么？
拼圆环
先思考
其实我们要拼的并不是一个真正的圆，而是一个多边形，有几张图片就是几边形，如果只有四张图片，那就和上面的代码差不多了。但是在我们这里还是得把它当做一个圆环来进行计算
既然是圆环，那么首先就要得到圆环的半径等信息，而这个半径必须得根据图片来发生变化，图片越多，半径越大，图片的宽度越大，半径也会相应的变大
想要得到半径，可以根据周长来进行计算，那么周长又是什么呢？ 其实不就是所有图片首尾相接得到的长度么？ 那么这么说的话，这个半径就比较好计算了
写代码
在写之前，要知道自己要写的大概是这么个玩意儿：
圆环的中间是所有图片的父级，先把所有图片叠起来，其实就是把所有图片定位，然后居中对齐，在接着，让图片在Z轴方向移动半径的距离，并且旋转一定的角度，这个圆环就出来了
我们看看动作拆解：
没看清？没关系，再来个慢动作
其基本原理就是先把图片旋转一定的角度，然后推出去就可以了。
不过理解是这么理解，代码里其实是相反的，由于位移函数是从后往前计算
比如：transform: rotateY(72deg) translateZ(300px);
这段代码里会先计算位移，然后计算旋转，这样才能达到把图片推出去，并且旋转到我们想要的角度的目的
至于角度怎么计算？ 其实很简单
比如5边型，那么直接360°除以5就可以了，得到的就是每个图片要旋转的角度。
圆环代码：
看这里看这里~
也可以点这里看效果哦~ 不过由于用的是github的地址，所以不一定能打开
有了这些基础之后，把整个圆环用一个只有单张图片大小的父级装起来，就可以变成幻灯片啦。
切换的时候只需要去旋转对应的角度就可以了。
幻灯片 完整代码在这里哦~
也可以点这里看效果哦~ 不过由于用的是github的地址，所以不一定能打开
