简约大气的3D翻转商业名片特效

一款简约大气的3D翻转商业名片特效，名片有一个自动上下轻微晃动的动态效果，当鼠标点击名片时会有一个3D翻转的特效，显示预设的名片相关内容，整体配色和效果还是挺大气的，喜欢的童鞋请收下吧。

分类：悬浮层/弹出层 > 悬浮层难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，仅需引入一个CSS样式文件即可，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，名片的正面和背面均使用了div作为容器，代码如下：

<div class='card-wrapper'>
  <div class='card' data-toggle-class='flipped'>
    <div class='card-front'>
      <div class='layer'>
        <h1>素材火</h1>
        <div class='corner'></div>
        <div class='corner'></div>
        <div class='corner'></div>
        <div class='corner'></div>
      </div>
    </div>
    <div class='card-back'>
      <div class='layer'>
        <div class='top'>
          <h2>html+css+javascript+php+mysql</h2>
        </div>
        <div class='bottom'>
          <h3>
            昵称：
            <a href='#' target='_blank'>Richer</a>
          </h3>
          <h3>
            电话：
            <a href='tel:18888888888'>18888888888</a>
          </h3>
          <h3>
            邮箱：
            <a href='mailto:Richer@sucaihuo.com'>Richer@sucaihuo.com</a>
          </h3>
          <h3>
            网站：
            <a href='https://www.sucaihuo.com' target='_blank'>sucaihuo.com</a>
          </h3>
        </div>
      </div>
    </div>
  </div>
</div>

页面的底部，需引入一个JS文件，响应鼠标点击的事件等，代码如下：

<script type="text/javascript" src="js/index.js"></script>