这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效。该特效基于Bootstrap网格系统来布局，通过简单的CSS3代码，在鼠标滑过图片时对图片进行3D翻转，效果非常的酷。
使用方法
HTML结构
该特效使用Bootstrap网格系统来布局。
Williamson
...
......
CSS样式
每张图片的包裹元素.box使用perspective属性来制作3D透视空间。它里面的图片默认沿Y轴旋转0度，并为所有的动画设置0.5秒的ease-in-out过渡效果。
.box{
position: relative;
perspective: 1000px;
}
.box .box-img{
transform: rotateY(0);
transition: all 0.50s ease-in-out 0s;
}
鼠标滑过图片时，图片沿Y轴旋转-90度。
.box:hover .box-img{
transform: rotateY(-90deg);
}
.box-content是黑色的内容显示层。它使用绝对定位，宽度和高度和它的父容器相同。同样为所有的动画执行0.5秒的ease-in-out过渡效果。它默认情况下沿Y轴旋转了90度。
.box .box-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 60px 20px;
text-align: center;
background: rgba(0,0,0,0.7);
transform: rotateY(90deg);
transition: all 0.50s ease-in-out 0s;
}
在鼠标滑过时，.box-content沿Y轴旋转回0度。这样图片和内容层形成交叉旋转的效果。
.box:hover .box-content{
transform: rotateY(0);
}
完整的CSS代码请参考下载文件。
