这是一款使用CSS3制作的炫酷鼠标滑过图片动画特效。该特效中，当鼠标滑过图片时，图片会向上3D翻转并渐隐消失，图片原来的位置出现介绍文字和一些链接，整个效果非常炫酷。
使用方法
HTML结构
该鼠标滑过图片动画效果的HTML结构使用Bootstrap来布局，布局非常简单：
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="box"> <img src="images/1.jpg" alt=""> <div class="over-layer"> <h3 class="title">Web designer</h3> <p class="description">描述文字...</p> <ul class="social-links"> <li><a href="#" class="fa fa-download"></a></li> <li><a href="#" class="fa fa-link"></a></li> <li><a href="#" class="fa fa-search"></a></li> </ul> </div> </div> </div> </div></div> |
CSS样式
一幅图片和它的描述文本都包裹在一个div.box容器中，为容器设置透视效果。
.box{ position: relative; perspective: 1000px;} |
图片开始时透明度为1，宽度为100%容器宽度，高度自适应，并设置ease-in-out的动画过渡效果。
.box img{ width: 100%; height: auto; opacity:1; transform: translateY(0) rotateX(0); transition: all 0.6s ease-in-out 0s;} |
在鼠标滑过图片的时候，图片沿Y轴移动-100%（即向上移动，移动距离为图片的高度），并沿X轴旋转90度，由于设置了旋转的中心为图片的底部，所以得到的效果为图片向上并翻转的效果。
box:hover img{ transform: translateY(-100%) rotateX(90deg); transform-origin: center bottom 0; opacity:0;} |
图片的文字层开始使透明度为0，定位方式使用绝对定位，宽度和高度都为100%容器宽度和高度，同样设置ease-in-out的动画过渡效果。
.box .over-layer{ position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; background:#333d4b; text-align:center; padding: 0 20px; transition: all 0.60s ease-in-out 0s;} |
在鼠标滑过时，它的透明度被设置为1。
.box:hover .over-layer{ opacity:1;} |
完整的CSS样式代码请参考下载文件。
网盘下载密码:uwym
