转载

纯CSS3炫酷全屏3D立方体旋转幻灯片特效

简要教程

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

查看演示 下载插件

使用方法

HTML结构

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

元素是一个立方体的面。幻灯片的上下导航按钮使用的是radio单选按钮和label来制作。整个3D立方体幻灯片被包裹在一个div容器中。

Maserati GranTurismo

......

......

CSS样式

你要将DEMO中的图片更换自己的图片，可以找到skin.min.css中的以下代码，更换图片的地址即可。

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; }

你可能会喜欢以下两个插件：

jQuery和CSS3炫酷全屏3D旋转幻灯片特效

超酷3D立方体空间旋转图片画廊特效

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/css3/css3donghua/201509252617.html

正文到此结束