欢迎来到我的CSS3专题系列文章，更多精彩内容持续更新中，欢迎关注 ：)

CSS3 3D在大多的项目中应用还是挺广泛的，今天我将继续为大家分享一个新的3D交互效果。

本章目标css3 3D实战css3倒影css3 关键帧动画

先来看我们今天要实现的效果吧！看似好复杂，1招教你搞定它，没错，就是通过关键帧动画来搞，我们一步步的来分析看

一个3D翻转的图集

css3 3D实战

老规矩，先布局，这个就比较简单了。一个容器里面放N个div，依次绝对定位，使其所有的图片叠在一起！

然后让它们的父级设置为3D空间，并设置景深。

值得注意的是，不要忘了设置旋转基点为底部。

绝对定位后，我们还要设置每一张图片的层级，倒序

css3倒影

从gif图中可以看出来。每张图片都会有一个倒影的效果。在CSS3中我们是采用的box-reflect来实现倒影效果

box-reflect：none | <direction> <offset>? <mask-box-image>

第一个参数为：我们要设置的倒影的方向，它的取值有：

above:表示生成的倒影在对象（原图）的上方；below:表示生成的倒影在对象（原图）的下方；left:表示生成的倒影在对象(原图)的左侧；right:表示生成的倒影在对象(原图)的右侧；

第二个参数offset是用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值

第三个参数是用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像

来看一个示例：

demo中设置是的10px ，gif图中是0

注意：box-reflect属性并不是一个标准的css3属性，所以我们需要加上webkit内核前缀。不加的话，效果出不来。

css3 关键帧动画

图中的动画效果我是采用的CSS3的帧动画来完成的，我们先来看看帧动画的语法。

要想使用帧动画，首先我们得先定义一个动画帧，我们通过@keyframes关键字来定义它

语法：

@kyeframes 动画名称{ 0%{ ... } 10%{ } 100%{ //.. }}

我们在动画帧函数里面可以精准的定义动画的每一帧的变化情况。我们可以使用百分比的形式，也可以使用关键字，from to

定义完成后，我们可以在元素身上设置动画相关的属性

animation:动画名称 动画时间 延迟时间 动画运动形式 ...

我们先来实现一个简单的demo看看

运动一次，运动完成后，又回到了第一帧，一般来说，我们希望它停留在动画的最后一帧。我们一般在animation上再加一个forwards即可。

终极效果分析

当我们点击下一张的时候，当前的图片向前翻转消失，下一张出现，所以我们需要定义两个帧动画效果。

当下一张图片出现后，图片本身一个轻微的振动效果，这里我们也是通过多定义几个动画帧来实现的具体的代码如下：

最后我们来实现点击的逻辑。当我们点击下一张的时候，我们需要将当前的一张的动画设置成hide,下一张图片设置成show

这里我使用的是iNow变量来表示当前是第几张图片。

源码请私信我

效果完成。

总结：css3的可以实现倒影的效果，但是记得要加上-webkit-前缀帧动画的基础语法。css3帧动画可以实现比transition更为复杂的动画效果,如此这个示例拿transition来做，可能就比较麻烦了。

这里是【畅哥聊技术】CSS3专题的系列文章，更多精彩内容持续更新中……

未完待续。。。