一款纯css3实现的图片3D翻转幻灯片
之前介绍了好多款网页幻灯片，今天要给大家再带来一款纯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:;
left:;
right:;
bottom:;
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
一款纯css3实现的图片3D翻转幻灯片的更多相关文章
- 基于jQuery和CSS3炫酷图片3D旋转幻灯片特效
在线预览 源码下载 iPresenter是一款效果非常炫酷的jQuery和CSS3 3D旋转幻灯片特效插件.你可以使用它来制作产品展示.图片画廊或者各种幻灯片和轮播图特效.这款幻灯片插件的特点有: ...
- 一款基于css3的散子3D翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: <body& ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 一款纯css3实现的超炫3D表单
今天要给大家分享一款纯css3实现的超炫3D表单.该特效页面的加载的时候3d四十五度倾斜,当鼠标经过的时候表单动画回正.效果非常炫,一起看下效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 纯CSS3实现的图片滑块程序 效果非常酷
原文:纯CSS3实现的图片滑块程序 效果非常酷 之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性 ...
- 16款纯CSS3实现的loading加载动画
分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 一款纯css3实现的条纹加载条
之前为大家带来了很多加载动画. 基于prefixfree.js的进度加载条 ,基于jquery带百分比的响应式进度加载条.今天给大家分享一款纯css3实现的条纹加载条.带有响应式的效果.效果图如下 : ...
随机推荐
- cpuinfo详解
cat /proc/cpuinfo processor: 23:超线程技术的虚拟逻辑核第24个 ###一般看最后一个0...23 表示24线程 vendor_id: GenuineIntel:CP ...
- linux(red hat)下安装jenkins
Jenkins的安装能够分为在线安装和下载软件本地安装.我这里用的是另外一种方法,将其下载后是一个应用程序直接点击安装就能够.等安装完后配置一下jdk的路径就ok啦!接下来进行具体的说明: 一．前提 ...
- 【zend studio】如何添加已存在的git项目
1.在zend里面新增项目crm2 2.win下进入crm2目录,右键选择 Git Bash Here,进项git clone操作 3.进入下载下来的GIT项目目录,选择复制,然后返回上一目录crm2 ...
- Centos5 下redmine的安装及配置
Redmine: 这是基于ROR框架开发的一套跨平台项目管理系统,是项目管理系统的后起之秀,据说是源于Basecamp的ror版而来,支持多种数据库,除了和 DotProject的功能大致相当外,还有 ...
- 二叉搜索树 C语言实现
1.二叉搜索树基本概念 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是一棵具有如下特性的非空二叉树: (1)若它的左子树非空,则左子树上所有结点的关键字均小于根结点的关键字: (2)若它的右子树非 ...
- checkbox选择框如果被选中value值就可以传过去,没有被选中value就不能穿过去(调试了近一天，坑爹的说)
因为要适合各种分辨率,所以将原来的单选按钮radio换成单个的checkbox
- JQuery 导入导出 Excel
正在做一个小项目, 从数据库中查询数据放在 HTML Table 中. 现在想要从这个 table 中导出数据来. 另外用户需要选择导出的列. 使用 jQuery 的导出插件可以完成这个需求. jQu ...
- 【Linux】在线求助man page与info page
先来了解一下Linux有多少命令呢?在文本模式下,你可以直接按下两个[Tab]按键,看看总共有多少命令可以让你用? [knife@www ~]$ <==在这里不要输入任何字符,直接输入两次[ta ...
- 可重入函数、线程安全、volatile
一. POSIX 中对可重入和线程安全这两个概念的定义: Reentrant Function:A function whose effect, when called by two or more ...
- Python len() 方法
描述 Python len() 方法返回对象(字符串.列表.元组.字典等)长度或项目个数. 语法 len() 方法语法: len(obj) 参数 obj -- 对象(字符串.列表.元组.字典等). 返 ...