标签：
这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效。该幻灯片使用全屏的3D立方体作为slide的载体，通过上下导航按钮，可以垂直旋转立方体，将立方体各个面上的幻灯片图片展示出来，效果非常炫酷。
该幻灯片的立方体结构使用的是一个无序列表来制作，每一个<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
|
<div class="buttons-wrapper"> <input id="slide1" type="radio" name="slider" checked> <input id="slide2" type="radio" name="slider"> <input id="slide3" type="radio" name="slider"> <input id="slide4" type="radio" name="slider"> <ul class="slider"> <li> <div class="caption"> <h3>Maserati GranTurismo</h3> <p>......</a> </p> </div> </li> ...... </ul> <label for="slide1"></label> <label for="slide2"></label> <label for="slide3"></label> <label for="slide4"></label></div> |
你要将DEMO中的图片更换自己的图片，可以找到skin.min.css中的以下代码，更换图片的地址即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
body .buttons-wrapper .slider > li:nth-child(1) { background: url(1.jpg) no-repeat center center;}body .buttons-wrapper .slider > li:nth-child(2) { background: url(2.jpg) no-repeat center center;}body .buttons-wrapper .slider > li:nth-child(3) { background: url(3.jpg) no-repeat center center;}body .buttons-wrapper .slider > li:nth-child(4) { background: url(4.jpg) no-repeat center center;} |
标签：
原文地址：http://www.cnblogs.com/w2bc/p/4948984.html
