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

这是一款效果非常酷的纯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

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

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;

}           

时间： 2024-10-18 02:54:56

纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效的相关文章

jQuery和CSS3炫酷全屏滑动菜单特效

这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件.这个插件的效果是当点击了主菜单按钮时,全屏菜单从屏幕左侧滑出,主菜单按钮动态旋转更换图标. 下图演示了这个效果的过程: 在线演示:http://www.htmleaf.com/Demo/201502131375.html 下载地址:http://www.htmleaf.com/jQuery/Menu-Navigation/201502131374.html

HTML5 CSS3 诱人的实例： 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l

纯CSS3炫酷3D折叠面板动画特效

这是一款效果非常炫酷的CSS3 3D折叠面板动画特效.该折叠面板特效当鼠标移动到图片上时,一个面板会以3d折叠的方式在顶部展开,并显示图片的标题等信息..这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. 在线演示:http://www.htmleaf.com/Demo/201501251276.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201501251275.html

jQuery和CSS3超酷全屏视觉差幻灯片特效

这是一款效果非常炫酷的jQuery和CSS3全屏视觉差幻灯片特效.该幻灯片采用半透明的遮罩层作为文字说明层.在幻灯片切换时,文字有动态放大的效果.图片和文字的移动形成了一种微妙的视觉差效果. 效果演示:http://www.htmleaf.com/Demo/201506162049.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201506162048.html

HTML5 CSS3 诱人的实例： 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

js和CSS3炫酷3D相册展示

<!doctype html> <html> <head> <meta charset="UTF"> <title>js和CSS3炫酷3D相册展示</title> <style> *{margin:0;padding:0;} body{background:url(img/bg.jpg);width:100%;height:100%;overflow:hidden;}; h1{width:277;hei

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat

为你的WordPress博客添加CSS3炫酷读者墙

为你的WordPress博客添加CSS3炫酷读者墙,也就是把你文章的评论最活跃的读者显示在单独的一个页面,先看看效果吧: 1.复制主题的page.php,另存为readerwall.php,然后在其顶部添加代码 1 2 3 4 5 < ?php /* Template Name: Reader wall */ ?> 2.接着改文件下面找到 1 < ?php the_content('');?> 在它的前面添加下面的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 1

基于css3的3D立方体旋转特效

今天给大家分享一款基于css3的3D立方体旋转特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box">