懂你所需,做你所想
当前位置: 仙桃云科 > 新闻资讯 > 技术指导 >

纯css3实现的图片3D翻转幻灯片

发表日期:2014-10-17文章编辑:仙桃云科网络科技有限公司

之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片。这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错。一起看下效果图:

纯css3实现的图片3D翻转幻灯片

实现的代码。

html代码:

<div style="width: 850px; margin: auto;">
        <h1>
            pure CSS slice cube slideshow</h1>
        <style>
            @import 'http://codepen.io/pixelass/pen/wftos.css'</style>
        <input type="radio" name="radio___1" checked="checked" id="radio0___1" class="hidden radio0" />
        <input type="radio" name="radio___1" id="radio1___1" class="hidden radio1" />
        <input type="radio" name="radio___1" id="radio2___1" class="hidden radio2" />
        <input type="radio" name="radio___1" id="radio3___1" class="hidden radio3" />
        <input type="radio" name="radio___1" id="radio4___1" class="hidden radio4" />
        <div lang="en" id="dropwown____1" class="dropdown DROPDOWN">
            <input type="checkbox" name="dropdown___1" id="dropdown___1" class="hidden dropdown-toggle" />
            <label for="dropdown___1" data-label-0="Slideshow" data-label-1="Slide 1" data-label-2="Slide 2"
                data-label-3="Slide 3" data-label-4="Slide 4" data-label-5="undefined" data-label-6="undefined"
                data-label-7="undefined" data-label-8="undefined" data-label-9="undefined" data-label-10="undefined"
                data-label-11="undefined" data-label-12="undefined" data-label-13="undefined"
                data-label-14="undefined" data-label-15="undefined" data-label-16="undefined"
                data-label-17="undefined" data-label-18="undefined" data-label-19="undefined"
                data-label-20="undefined" data-label-21="undefined" data-label-22="undefined"
                data-label-23="undefined" data-label-24="undefined" data-label-25="undefined"
                data-label-26="undefined" data-label-27="undefined" data-label-28="undefined"
                data-label-29="undefined" class="dropdown-select">
            </label>
            <ul class="dropdown-menu">
                <li class="dropdown-option">
                    <label for="radio0___1" class="radio0">
                        Slideshow
                    </label>
                </li>
                <li class="dropdown-option">
                    <label for="radio1___1" class="radio1">
                        Slide 1
                    </label>
                </li>
                <li class="dropdown-option">
                    <label for="radio2___1" class="radio2">
                        Slide 2
                    </label>
                </li>
                <li class="dropdown-option">
                    <label for="radio3___1" class="radio3">
                        Slide 3
                    </label>
                </li>
                <li class="dropdown-option">
                    <label for="radio4___1" class="radio4">
                        Slide 4
                    </label>
                </li>
            </ul>
        </div>
        <div class="pane">
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
            <div class="cube">
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
                <div class="side">
                </div>
            </div>
        </div>
    </div>

css代码:

  .pane {
  -webkit-perspective: 700px;
          perspective: 700px;
  height: 15em;
  width: 35em;
  margin: 0 230px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.cube {
  display: inline-block;
  position: relative;
  height: 15em;
  width: 5em;
  -webkit-transform: rotatey(0);
      -ms-transform: rotatey(0);
          transform: rotatey(0);
  -webkit-transition: -webkit-transform 2.56s;
          transition: transform 2.56s;
  visibility: hidden;
  -webkit-animation-duration: 16s;
          animation-duration: 16s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
.cube:nth-child(1) {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.cube:nth-child(1) .side {
  background-position: 0em 0;
}
.cube:nth-child(2) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.cube:nth-child(2) .side {
  background-position: -5em 0;
}
.cube:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.cube:nth-child(3) .side {
  background-position: -10em 0;
}
.cube:nth-child(4) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.cube:nth-child(4) .side {
  background-position: -15em 0;
}
.cube:nth-child(5) {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.cube:nth-child(5) .side {
  background-position: -20em 0;
}
.cube:nth-child(6) {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.cube:nth-child(6) .side {
  background-position: -25em 0;
}
.cube:nth-child(7) {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.cube:nth-child(7) .side {
  background-position: -30em 0;
}
.cube, .cube .side {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cube .side {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: visible;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background-color: black;
  background-size: 35em;
}
.cube .side:nth-child(1) {
  background-image: url("slide_1.jpg");
  -webkit-transform: translateZ(7.5em);
          transform: translateZ(7.5em);
}
.cube .side:nth-child(2) {
  width: 300%;
  -webkit-transform: rotatey(-90deg) translatez(7.5em);
      -ms-transform: rotatey(-90deg) translatez(7.5em);
          transform: rotatey(-90deg) translatez(7.5em);
}
.cube .side:nth-child(3) {
  width: 300%;
  -webkit-transform: rotatey(90deg) translatez(-2.5em);
      -ms-transform: rotatey(90deg) translatez(-2.5em);
          transform: rotatey(90deg) translatez(-2.5em);
}
.cube .side:nth-child(4) {
  background-image: url("slide_2.jpg");
  -webkit-transform: rotatey(180deg) rotatez(180deg) translatez(7.5em);
      -ms-transform: rotatey(180deg) rotatez(180deg) translatez(7.5em);
          transform: rotatey(180deg) rotatez(180deg) translatez(7.5em);
}
.cube .side:nth-child(5) {
  background-image: url("slide_3.jpg");
  -webkit-transform: rotatex(-90deg) translatez(7.5em);
      -ms-transform: rotatex(-90deg) translatez(7.5em);
          transform: rotatex(-90deg) translatez(7.5em);
}
.cube .side:nth-child(6) {
  background-image: url("slide_4.jpg");
  -webkit-transform: rotatex(90deg) translatez(7.5em);
      -ms-transform: rotatex(90deg) translatez(7.5em);
          transform: rotatex(90deg) translatez(7.5em);
}

#radio0___1:checked ~ .pane .cube {
  -webkit-animation-name: SLIDESHOW;
          animation-name: SLIDESHOW;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

#radio1___1:checked ~ .pane .cube {
  -webkit-transform: rotatex(0deg);
      -ms-transform: rotatex(0deg);
          transform: rotatex(0deg);
}

#radio2___1:checked ~ .pane .cube {
  -webkit-transform: rotatex(90deg);
      -ms-transform: rotatex(90deg);
          transform: rotatex(90deg);
}

#radio3___1:checked ~ .pane .cube {
  -webkit-transform: rotatex(180deg);
      -ms-transform: rotatex(180deg);
          transform: rotatex(180deg);
}

#radio4___1:checked ~ .pane .cube {
  -webkit-transform: rotatex(270deg);
      -ms-transform: rotatex(270deg);
          transform: rotatex(270deg);
}

@-webkit-keyframes SLIDESHOW {
  0%, 15% {
    -webkit-transform: rotatex(0deg);
            transform: rotatex(0deg);
  }
  25%, 40% {
    -webkit-transform: rotatex(90deg);
            transform: rotatex(90deg);
  }
  50%, 65% {
    -webkit-transform: rotatex(180deg);
            transform: rotatex(180deg);
  }
  75%, 90% {
    -webkit-transform: rotatex(270deg);
            transform: rotatex(270deg);
  }
  100% {
    -webkit-transform: rotatex(360deg);
            transform: rotatex(360deg);
  }
}

@keyframes SLIDESHOW {
  0%, 15% {
    -webkit-transform: rotatex(0deg);
            transform: rotatex(0deg);
  }
  25%, 40% {
    -webkit-transform: rotatex(90deg);
            transform: rotatex(90deg);
  }
  50%, 65% {
    -webkit-transform: rotatex(180deg);
            transform: rotatex(180deg);
  }
  75%, 90% {
    -webkit-transform: rotatex(270deg);
            transform: rotatex(270deg);
  }
  100% {
    -webkit-transform: rotatex(360deg);
            transform: rotatex(360deg);
  }
}
如没特殊注明,文章均为仙桃云科网络原创,转载请注明来自>
相关新闻

Java6和Java8在Windows上共存...

最近在做一个Android的项目,一开始安装的是Java8用于项目的开发。但是在项目后期需要用到drozer用于检测项目的安全性,要搭建drozer的测试环境必须要使用Java6,否则会出...

日期:2017-08-30

OpenGL与CUDA互操作方式总结...

一、介绍 CUDA是Nvidia推出的一个通用GPU计算平台,对于提升并行任务的效率非常有帮助。本人主管的项目中采用了OpenGL做图像渲染,但是在数据处理方面比较慢,导致帧率一直...

日期:2017-08-18

nodejs-基础与深入...

01-nodejs介绍 1.什么是nodejs 1. (javascript跑在机器端,服务端)Javascript on the machine 2. (跑在谷歌v8引擎上)A runtime for Google Chrome s V8 Javascript eng...

日期:2017-08-07

InnoDB关键特性之刷新邻接页-异...

Flush neighbor page 1、工作原理 2、参数控制 AIO 1、开启异步IO 一、刷新邻接页功能 1、工作原理 当刷新一个脏页时,innodb存储引擎会检测该页所在区(extent)的所有页,...

日期:2017-07-31

Java8 Stream代码详解+BenchMark...

1、基本介绍 1、创建方式 1、Array的Stream创建 1、直接创建 // main Stream stream = Stream. of ( a , b , c );String [] strArray = new String[] { a , b , c };stream...

日期:2017-07-24

Java 数据类型在实际开发中应用...

在实际编程中,往往存在着这样的数据集,它们的数值在程序中是稳定的,而且数据集中的元素是有限的。在JDK1.5之前,人们用接口来描述这一种数据类型。 1.5以后引入枚举 一...

日期:2017-07-17