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

当前位置:主页 > CSS3库 > CSS3动画 > 纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效
纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2015-09-25
    阅读:
简要教程

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

使用方法

HTML结构

该幻灯片的立方体结构使用的是一个无序列表来制作,每一个<li>元素是一个立方体的面。幻灯片的上下导航按钮使用的是radio单选按钮和label来制作。整个3D立方体幻灯片被包裹在一个div容器中。

<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中的以下代码,更换图片的地址即可。

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