图片/图形
CSS3炫酷鼠标滑过卡片3D翻转特效
PetitQ
这是一款这是一款使用 CSS3 制作的效果非常炫酷的鼠标滑过卡片 3D 翻转特效。该特效开始时，图片被在 3D 空间中倾斜，当顶部滑过图片的时候，卡片平滑过渡到正常位置，卡片上的图片被缩小，同时显示出说明文字和一些链接图标。
HTML 结构
该 3D 卡片翻转特效的 HTML 结构使用 HTML5
也想出现在这里？联系我们吧
元素，卡片的文字说明和链接图标使用元素来制作。
<figure id="img-wrapper">
<img src="img/1.jpg" alt="Preview Image">
<figcaption>
<h2 class="title">Hover Design Interaction</h2>
<div class="bottom-detail">
<p>......</p>
<ul class="social-icons">
<li><a class="fa fa-qq" href="#"></a></li>
<li><a class="fa fa-weibo" href="#"></a></li>
<li><a class="fa fa-weixin" href="#"></a></li>
<li><a class="fa fa-renren" href="#"></a></li>
</ul>
</div>
</figcaption>
</figure>
CSS 样式
首先整个包裹元素#tri-d-wrapper 被使用 perspective 制作为 3D 空间。
#tri-d-wrapper {
-webkit-perspective: 300px;
perspective: 300px;
position: absolute;
height: 100%;
width: 100%;
}
接下来
元素被绝对定位到屏幕中间，并设置了一些阴影效果。同时使用 rotateX 和 scale 将它沿 X 轴旋转并缩小。为了制作平滑的过渡效果，添加了 transition 属性。
#img-wrapper {
width: 350px;
background: #3498db;
margin: 0;
position: absolute;
cursor: pointer;
border-radius: 3px;
overflow: hidden;
top: 40%;
left: 50%;
margin-left: -175px;
margin-top: -131px;
-webkit-transform: rotateX(30deg) scale(.65);
transform: rotateX(30deg) scale(.65);
-webkit-transition: .3s all ease;
transition: .3s all ease;
box-shadow: 0 15px 20px 5px rgba(0,0,0,.2);
}
在鼠标滑过
也想出现在这里？联系我们吧
