本文为H5EDU机构官方的HTML5培训教程swiper教程。
这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。

首先搭建swiper页面，设置CSS样式，为了观看效果，这一章依然在slide当中添加背景图片。

<divclass="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide"><imgsrc="logo.png"></div><divclass="swiper-slide"></div><divclass="swiper-slide"></div><divclass="swiper-slide"></div></div><divclass="swiper-pagination"></div></div>

然后在js当中进行初始化以及添加翻页动画。依然是一条属性，但是有些不同。

varswiper=newSwiper('.swiper-container',{pagination:'.swiper-pagination',grabCursor:true,effect:'cube',//翻页效果：方块cube:{shadow:true,slideShadows:true,shadowOffset:20,shadowScale:0.94}});

那么除了直接添加的属性意外，我们的翻页动画当中还有着自己的属性，就是这里

cube:{shadow:true,//阴影效果，如果设置为false下面的就不用slideShadows:true,//页面阴影效果shadowOffset:20,//阴影的偏移值shadowScale:0.94//阴影的大小}

这样就实现了3D方块的翻页效果

点击进入swiper强化教程