之前介绍了好多款网页幻灯片，今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片。这款幻灯片图片轮播采用了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); }}
