-webkit-transform:rotateX(180deg) rotateY(90deg) rotateZ(90deg);
}
50%{
-webkit-transform:rotateX(270deg) rotateY(180deg) rotateZ(180deg);
}
75%{
-webkit-transform:rotateX(360deg) rotateY(270deg) rotateZ(270deg);
}
}
展示效果：
三、CSS3 3D使用特效制作与分析
1、模拟卡牌翻转效果
这个我就不多说怎样制作了，先上效果，图片是来源于蜗牛的，如有侵犯请告知
这个虽然是归类到3D的范围内，但是在使用的时候由于不需要产生平行四边形的变换效果(这个的具体效果详见博主的另外一篇博文)，所以不需要使用perspective这个属性，但是确实需要使用到CSS3 3D常见效果中的翻转属性(rotate[X,Y,Z]),这个的具体原理也是简单，但是在使用的时候有两点是需要注意的。
一）、因为旋转是相对于卡牌的整体的旋转，也就是两个面都要旋转，所以hover事件要相对于卡牌整体，如果是相对于某一个面的话，那么会出现一个面旋转，而另外一个面不旋转的现象
二）、在制作的过程中使用了一个比较少见的属性：backface-visibility，这个属性是为了见图片的背面设置为不可见，从而达到实现翻转的效果
具体代码见文章最后
2、CSS3 3D轮播
说到CSS3 3D轮播主要我们可以分成这样的三类，一类是自动播放的轮播图，另外一类是响应点击事件的轮播图，第三类是两者的结合，即自动播放又响应点击事件，这里我们主要讨论的是前两者，第三类比较复杂这里我们就不多做解释，以后有机会再来跟大家探讨探讨
2.1 自动轮播图
这个的原理我们已经在前面中多次提到了，但是各位要注意一个地方，在keyframes中设置如：
