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


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

    在线预览   源码下载

    实现的代码。

    html代码:

    <div style=" 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);
      }
    }

    注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/8549

  • 相关阅读:
    [年报阅读] 中国银行业监督管理委员会2009年报(1)
    囧事
    [论文收集] 2009年|国内计算机方向三大学报|Web Service相关论文
    打开那扇窗
    初生牛犊不怕虎
    忘却的纪念
    Java JDBC学习
    Java数组学习
    如何清晰地思考:近一年来业余阅读的关于思维方面的知识结构整理(附大幅思维导图)
    管理类文件
  • 原文地址:https://www.cnblogs.com/liaohuolin/p/4030207.html
Copyright © 2020-2023  润新知