李燕华

（北京市海淀区职工大学 北京市 100083）

轮播图是在Web 页面展示信息的一种方式，显示在首页的顶部，在有限的网页空间中采用高分辨率的图片来显示电商网站的商品信息或者其他网站的重要宣传信息，用户不用滚动屏幕就能看到更多内容，极大提高了网页的观赏性和可读性[1]。网页制作新技术HTML5 对于3D 技术有很好的支持，可以制作效果更炫的3D 切割轮播图。本文利用HTML、CSS3 和jQuery 完成了3D 切割轮播图从布局到运行的总体实现，其中HTML 搭建页面结构，CSS3 设置页面样式和3D 转换，使用jQuery 技术实现交互效果。

1 3D切割轮播图的描述

3D 切割轮播图一般使用4 张图片进行旋转切换轮播，图片切换时并不是一次性的整张图片都切换过来，而是分成几块逐次切换（本文把图片分成5 块来演示），最终形成一张完整图片，从而形成立体的切割轮播图效果。如图1、图2、图3所示。

2 3D切割轮播图的实现思想

3D 切割轮播图中图片旋转切换是利用了CSS3 的3D 旋转功能，把四张用来切换的图片分别看作一个立方体的前、上、后、下四个面，通过立方体沿着X 轴旋转来实现图片的切换，从而形成一种立体旋转效果。

所谓的切割也并不是真的把图片进行物理分割，而是把存放图片的区域分成几列，把图片分别作为这几列的背景，通过CSS 定位功能改变背景图片的位置，使得在不同区域显示图片的不同部分，从而达到分割图片效果。

以上布局形成了多个立方体，把这几个立方体按照一定的时间间隔沿着X 轴进行旋转就实现了3D 切割轮播图的效果。……