CSS3炫酷鼠标滑过卡片3D翻转特效

当前位置:主页 > CSS3库 > CSS3动画 > CSS3炫酷鼠标滑过卡片3D翻转特效
CSS3炫酷鼠标滑过卡片3D翻转特效
分享:

    插件介绍

    这是一款这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时,图片被在3D空间中倾斜,当顶部滑过图片的时候,卡片平滑过渡到正常位置,卡片上的图片被缩小,同时显示出说明文字和一些链接图标。

    浏览器兼容性

    浏览器兼容性
    时间:2015-06-11
    阅读:
简要教程

这是一款使用CSS3制作的效果非常炫酷的鼠标滑过卡片3D翻转特效。该特效开始时,图片被在3D空间中倾斜,当顶部滑过图片的时候,卡片平滑过渡到正常位置,卡片上的图片被缩小,同时显示出说明文字和一些链接图标。

制作方法

HTML结构

该3D卡片翻转特效的HTML结构使用HTML5 <figure>元素,卡片的文字说明和链接图标使用<figcaption>元素来制作。

<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%;
  }               
              

接下来<figure>元素被绝对定位到屏幕中间,并设置了一些阴影效果。同时使用rotateXscale将它沿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);
}                
              

在鼠标滑过<figure>元素的时候,rotateX被置回0度,并且scale被重置为1。

#img-wrapper:hover {
    -webkit-transform: rotateX(0deg) scale(1);
    transform: rotateX(0deg) scale(1);
    box-shadow: none;
}                
              

以上是鼠标滑过卡片是的3D翻转效果,其他的效果实现方法比较简单,请参考下载的源文件。