CSS实现3D轮播效果

小咪咪 2022-09-27 15:26 534阅读 0赞

通过大牛张鑫旭的分享理解css 3D图片轮播效果 [http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/][http_www.zhangxinxu.com_wordpress_2012_09_css3-3d-transform-perspective-animate-transition]

![Center][]

其实3D图片轮播就是将所有图片摆弄成一个立体的对象 然后进行旋转。

思路是：所有图片在一个容器内，设置图片的position为absolute，则所有图片将共用一个中心点。将容器旋转，即所有图片绕着共同中心点旋转，产生轮播效果。但是这里要注意将图片摆弄成一个3D对象，不然就会挤在一块。

图片3D对象实现：

1、首先，需要设置perspective属性才能实现我们想要的3D效果。其w3school的定义如下：

![Center 1][]

该属性设置了观察者与3D元素的距离，z=0则是元素本来大小，>0则变大，<0则变小，跟我们观察现实生活中的物体是一样的。所以我们如果给图片设置了translateZ，图片的大小将会有所调整，在2D视平面上产生3D效果。如果不设置该属性，则z轴空间中的所有点将平铺到同一个2D平面中。

perspective属性用在动画元素们的共同父辈元素上的话，则动画元素们的形态才会有所区分，显示出立体效果。

2、此外，还需设置属性transform-style：preserve-3d 表示3D透视，不设置的话，3D变换就会变成2D平面的。一般而言，该属性设置在3D变换元素的父元素上。

页面的元素布局为：

![Center 2][]

为main设置 perspective:700px;为box设置 transform-style: preserve-3d;

3、假设有4张图片进行轮播，将其绕成一个圈，则每张图片绕Y轴偏转360/4=90deg。那么四张图片将会各自面向一侧。

img:nth-child(1) \{transform:rotateY(0deg);\}

img:nth-child(2) \{transform:rotateY(90deg);\}

img:nth-child(3) \{transform:rotateY(180deg);\}

img:nth-child(4) \{transform:rotateY(270deg);\}

![Center 3][]

此时你发现所有图片还是堆叠在一块，如何让它们间隔距离呢，就是让它们朝着各自面对的方向朝前走（设置）。走的距离需要计算一下。

![Center 4][]

所以走的距离为图片宽度的一半，但这只会刚好使图片边界连在一块，可以再多走几步，使图片彼此之间隔开。

![Center 5][]

效果如下：

![Center 6][]

接下来只要设置其绕着Y轴旋转，就能实现轮播的效果啦。

4、这里实现了点击切换下一张图片的效果，通过简单的原生js来实现

![Center 7][]

这里的90就是图片偏转的角度。

5、最终实现的效果  [https://github.com/Showingbun/nuomi/blob/master/carousel/carousel.html][https_github.com_Showingbun_nuomi_blob_master_carousel_carousel.html]

[http_www.zhangxinxu.com_wordpress_2012_09_css3-3d-transform-perspective-animate-transition]: http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
[Center]: /images/20220708/d6975f2cb7df421aa3a820fac984fcb1.png
[Center 1]: /images/20220708/748b458ff31445639c6f8aa03dea2596.png
[Center 2]: /images/20220708/38bac1444e9b43248510aa0dc189424b.png
[Center 3]: /images/20220708/044e3d003fd14777a1472134e06fce59.png
[Center 4]: /images/20220708/4dc9c87a865b4ae69f20ae66b80c3bb6.png
[Center 5]: /images/20220708/36baaf2114114ae9b99a0785710c94f5.png
[Center 6]: /images/20220708/927eb296b6544cfa83441f036b53c667.png
[Center 7]: /images/20220708/d2cf5c2bf95b4bcbaf54fd94e6f613c0.png
[https_github.com_Showingbun_nuomi_blob_master_carousel_carousel.html]: https://github.com/Showingbun/nuomi/blob/master/carousel/carousel.html