&nbs p;
一、前面的唠叨
老实讲，起初研究 CSS 3的一些东西真是很兴奋的，哇塞，这效果，太酷了，酷得就像超人的三角裤。但是最近，淡了。为什么呢？不是因为 百度 今天被黑了，也不是因为今天 服务器 宕了，更不是由于没有女 朋友 心灵空虚，而是因为这CSS3内容实在太多，我就像是来到了太平洋中间的一个孤岛上，举目望去，茫茫无边，不知何时才是个头。而且这玩意，以目前态势来看，想大规模应用，时机未到。所以呢，我要淡定，写完这篇CSS3相关的 文章 后，还是扎扎实实对当下的一些东西多研究研究。
所以呢，这里可能不会深入细致的将才CSS3中有关ani MATE 的属性了，太多太深了，很多东西都是一笔带过， 或者 只讲与本文主题相关的一些内容，至于延伸以及拓展，可能要放到以后了，来日方长，不急不急。
二、效果预览
正所谓一图胜千言，所以先看截图（截自ch rom e2 浏览器）：
还有人说，我只相信自己的 眼睛 ，所有您可以狠狠地点击这里：3D图片翻转效果demo
三、浏览器的支持情况
正所谓“ 人生 不如意事八九”，这不仅受用于我们人类，什么浏览器啊，技 术 啊都是这样。我似乎感受到了CSS3的郁闷——我可以实现那么酷的效果，我可以大大降低网页设计师的负担，为什么没有几个人（浏览器）支持我捏？
不过 好在还是有浏览器支持的 - webkit 核心的浏览器，就像是 GOOGLE 的C hr ome浏览器（较近的版本），apple的Safari浏览器（较近的版本）。所以呢，如果上面的demo页面打开后，发现一堆图片像 吃 了砒霜似的一动也不动，您看看您的浏览器是哪个牌子的。目前为止，IE及Firefox下式没有效果滴。
所以，我 知道 ，这篇文章的实用性，至少目前来讲，较低。作用无非是开开眼界，熟悉CSS3的一些功能，见识CSS3的一些惊人的潜力。
四、代码的 简单 讲解
demo页面是个单页面，您直接右键 & # 8211; 查看 源 文件，就可以看到完整的CSS代码了，我一改平时的书写习惯，竖式布局，方便您的阅读。
先上个图，活跃下版面：
上面的代码截图可以说差不多涵盖了大部分的核心代码。一一简述：
-webk IT - PE rspective 表示透视范围大小，在本视频中的效果并没有应用到这段样式的作用，我见过此样式其作用的视频，真是酷，真正意义上的3D视觉效果。至于这里为何看不到效果，我 觉得 吧，我这浏览器火候不够。 -webkit -t ransform -s tyle 很好理解了，表示变换类型， PR eserve-3d看上去就是3D效果，嘿嘿，感觉自己有点事后先生的感觉。 -webkit-animation-n am e 我的理解是自定义的动画名称。 -webkit-animation-duration 我可以确定是一次动画持续的时间。 -webkit-animation -i teration-count 表示动画循环的次数，我简单测了下，默认是一次，参数infinite表示无穷次。也就是一旦有了效果，它就会一直转啊转，知道转到你眩晕呕吐它还在转。您还可以设为任意的正整数，比如3，动画循环3次。 -webkit-animation-timing-function 这个我知道，运动类型嘛。参数有： ease | linear | ease-in | ease-out | ease-in-out | c ub ic-bezier(<number>, <number>, <number>, <number> )，这些参数归根结底就是贝赛尔曲线 ① 的四个参数，只是 ease-out 记 ease-in-out 之类的贝塞尔曲线已经设置好了，您可以直接拿来用。其对应关系如下： linear 线性，是多大值返回多大的值， y=x ease 默认的运动类型， 相当于 cubic-bezier(0.25, 0.1, 0.25, 1.0) ease-in 相当于 cubic-bezier(0.42, 0, 1.0, 1.0) ease-out 相当于 cubic-bezier(0, 0, 0.58, 1.0) ease-in-out 相当于 cubic-bezier(0.42, 0, 0.58, 1.0)// zxx: ① 贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称 锚 点）以及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化，详细介绍可参见我的这篇文章“深度掌握贝塞尔曲线指令”
动画效果要想 生效 ，还离不开 重要 的动画 细节 定义：
@-webkit-keyframes back-y-spin { 0% { -webkit-transform:rotateY( 360 deg ); } 50% { -webkit-transform:rotateY(180deg); } 100% { -webkit-transform:rotateY(0deg); } } 顾名思意，关键帧，就是一些关键的位置要 做出 的一些变化。针对本实例，可以依次解释为： y 轴反向旋转时，当旋转到 0% 的时候，对象翻转 360 度，其实也就是没有翻转。当旋转到 50% 时（本例即图片高度压至 0 时），翻转 180% ，这是真正意义上的完全翻转。旋转 100% ，即旋转了一圈之后，回到初始位置。
五、代码的作用范围
这里没有比标注图更清晰展示作用原理的了：
正如上面标注的，最外框应用的是垂直翻转效果，而最外框内部还有三个内框，每个内框里面有 5 个图片，这三个内容的效果是动画周期时间不一致的水平翻转效果，于是内外配合，就有了本实例所看到的图片墙翻转效果了。
六、最后的唠叨
CSS3需要 了解 的知识点实在太多了，所以我要端正下自己的心态，不可急功近利，慢慢来。至于 animate 一些深入细致的属性，以后一定会慢慢的详细的讲解了。本文就当是走马观花过过场吧。另外，对于CSS3我是个十足的 新手 ，所以要是您发现发现文章中有表述不准确欢迎提出来，我会及时纠正的。
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-CSS3 animate实现图片墙3D翻转效果 全部内容，希望文章能够帮你解决 html5教程-CSS3 animate实现图片墙3D翻转效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-CSS3 animate实现图片墙3D翻转效果的详细内容...