一款纯css3实现的图片3D翻转幻灯片_html/css_WEB-ITnose
程序员文章站
2022-06-04 15:59:07
...
之前介绍了好多款网页幻灯片,今天要给大家再带来一款纯css3实现的图片3D翻转幻灯片。这款幻灯片图片轮播采用了3D翻转的形式,效果非常不错。一起看下效果图:
在线预览 源码下载
实现的代码。
html代码:
pure CSS slice cube slideshow
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); }}
上一篇: Python实现处理管道的方法
下一篇: php定时执行任务
推荐阅读
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
CSS3实现3D效果的图片墙_html/css_WEB-ITnose
-
一款纯css3实现的图片3D翻转幻灯片_html/css_WEB-ITnose
-
一款纯css3实现的图片3D翻转幻灯片_html/css_WEB-ITnose
-
一款纯css3实现的数字统计游戏_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款纯css3实现的条纹加载条_html/css_WEB-ITnose