純粋な css3_html/css_WEB-ITnose で実装された画像 3D フリップ スライドショー

これまでに多くの Web スライドショーを紹介してきましたが、今日は純粋な 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);  }}