前段时间做了很多有关css3动画的项目。虽然当时都较圆满的完成了，但事后还是要总结一下的，趁着近期工作不忙，系统的学习了一些动画理论，重点看了transform3D变换，学习了translate平移、scale缩放、rotate旋转、并实践了perspective透视属性的作用在哪里。在网站上浏览了一些动画效果，挑了几个比较实用，常见的hover特效，实际写了一下，来提高自己三维空间的想像能力，和代码编写能力，关键是动画实现的思路，然后转化成相应的变换方式，就能写出美轮美奂的动画效果了。

第一个是图片向上翻转的效果，其难点在于动画方向：向上平移100%，横向翻转90度，并设置变换的中心点在底部。代码如下：

html:

<ul class="list-img">
<li>
<div>文字内容</div>
<span>我是图片</span>
</li>
<li>
<div>文字内容</div>
<span>我是图片</span>
</li>
<li>
<div>文字内容</div>
<span>我是图片</span>
</li>
</ul>

css:

.list-img{list-style: none;margin: 0;padding: 0;width: 1320px;margin: 100px auto 0;}
.list-img li{float: left;width: 400px;height: 400px;margin:0 20px;position: relative;}
.list-img li div,.list-img li span{width: 400px;height: 400px;position: absolute;}
.list-img li div{background: #333;color: #fff;}
.list-img li span{ background:#0CF; transform: translateY(0) rotateX(0); transition: 0.8s ease-in-out;opacity:1;}
.list-img li:hover span{transform: translateY(-100%) rotateX(90deg); transform-origin: center bottom 0;opacity: 0;}

效果预览：http://www.gbtags.com/gb/rtreplayerpreview-standalone/3092.htm

源码下载：http://pan.baidu.com/s/1eSmjZ7G

最新文章

  1. SharePoint 2013 版本功能对比
  2. EntityFramework简介
  3. polyfill之javascript函数的兼容写法——Array篇
  4. DDD：订单管理 之 如何组织代码
  5. hdu 2444 二分图判断与最大匹配
  6. 反向生成hbm.xml
  7. Java多线程编程模式实战指南：Active Object模式（下）
  8. 主题模型-LDA浅析
  9. cf C. Dima and Containers
  10. 让Safari使用Chrome的代理
  11. zoj 3197 Google Book
  12. Http的四种post方式
  13. Vscode新建html文件
  14. [Swift]LeetCode208. 实现 Trie (前缀树) | Implement Trie (Prefix Tree)
  15. Linux上搭建Hadoop集群
  16. Eclipse进度条出现“Remote System Explorer Operation”解决方法
  17. 【HTTP缓存】浏览器缓存理论知识
  18. 4月12 php练习
  19. makefile的一个错误:*** missing separator
  20. SQL学习笔记之项目中常用的19条MySQL优化

热门文章

  1. 201521123038 《Java程序设计》 第六周学习总结
  2. 201521123111《Java程序设计》第5周学习总结
  3. 201521123079《Java程序设计》第2周学习总结
  4. 201521123056 《Java程序设计》第13周学习总结
  5. 201521123031 《Java程序设计》第11周学习总结
  6. 201521123108 《Java程序设计》第11周学习总结
  7. C#核心语法讲解-泛型（详细讲解泛型方法、泛型类、泛型接口、泛型约束，了解协变逆变）
  8. Struts2第五篇【类型转换器、全局、局部类型转换器】
  9. Hibernate第六篇【多对多映射、一对一映射】
  10. Oracle日期时间操作大全