图片/图形
CSS3鼠标滑过图片3D翻转动画特效
PetitQ
这是一款效果非常炫酷的 CSS3 鼠标滑过图片 3D 翻转动画特效。该特效基于 Bootstrap 网格系统来布局，通过简单的 CSS3 代码，在鼠标滑过图片时对图片进行 3D 翻转，效果非常的酷。
HTML 结构
该特效使用 Bootstrap 网格系统来布局。
也想出现在这里？联系我们吧
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
<div class="box-img">
<img src="images/1.jpg" alt="">
</div>
<div class="box-content">
<h4 class="title">Williamson</h4>
<p class="description">...</p>
<ul class="social-links">
<li><a href="#" class="fa fa-qq"></a></li>
<li><a href="#" class="fa fa-weibo"></a></li>
<li><a href="#" class="fa fa-weixin"></a></li>
</ul>
</div>
</div>
</div>
......</div>
</div>
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 代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
