【特效】hover向上翻转效果

前段时间做了很多有关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