阅读 3068

3D版本来了—— 论如何把轮播图玩出花er来~

事情得从前两天我的另一篇文章说起,话说当时我... 算了闲话不多扯
这是文章链接:你们都被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的地址,所以不一定能打开

最终效果



文章分类
前端
文章标签