之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯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