I have introduced many web slideshows before, and today I want to bring you another image 3D flip slideshow implemented in pure CSS3. This slideshow image carousel adopts the form of 3D flipping, and the effect is very good. Let’s take a look at the renderings:
Online preview Source code download
Implemented code.
html code:
<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 code:
.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); }}
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
