这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效。该幻灯片使用全屏的3D立方体作为slide的载体,通过上下导航按钮,可以垂直旋转立方体,将立方体各个面上的幻灯片图片展示出来,效果非常炫酷。
使用方法
HTML结构
该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>
元素是一个立方体的面。幻灯片的上下导航按钮使用的是radio
单选按钮和label
来制作。整个3D立方体幻灯片被包裹在一个div
容器中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
CSS样式
你要将DEMO中的图片更换自己的图片,可以找到skin.min.css中的以下代码,更换图片的地址即可。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|