纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效_html/css_WEB-ITnose

这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效。该幻灯片使用全屏的3D立方体作为slide的载体，通过上下导航按钮，可以垂直旋转立方体，将立方体各个面上的幻灯片图片展示出来，效果非常炫酷。

在线预览    源码下载

 使用方法

 HTML结构

该幻灯片的立方体结构使用的是一个无序列表来制作，每一个

元素是一个立方体的面。幻灯片的上下导航按钮使用的是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

  

  

  

  

 

  

  

    

       Maserati GranTurismo h3 >

       ...... a >

       p >

     div >

   li >

   ......

   ul >

 

   label >

   label >

   label >

   label >

div >        

 CSS样式

你要将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 ;

}