带鼠标悬停翻转的个人卡片简洁版

一款带鼠标悬停翻转的个人卡片简洁版，只要鼠标滑入卡片区域，就会翻转显示卡片背面的图标联系方式，卡片风格比较简洁大气，喜欢的童鞋请收下吧。

分类：html/css > 按钮难易：初级

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

页面的head部分，远程调用font-awesome图标字体库，并引入本地CSS样式文件，代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了多个div容器的嵌套，代码如下：

<div class="card-container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="card">
    <div class="front">
      <div class="cover"></div>
      <div class="photo">
        <img src="http://www.sucaihuo.com/other/avatar/dir/905.jpg">
      </div>
      <h3 class="name">richer</h3>
      <p class="role">html+css+javascript</p>
      <div class="supporting_text">
        <span>php+mysql</span>
      </div>
      <div class="mdl-card__actions mdl-card--border mdl-typography--text-center">
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect">联系方式</button>
      </div>
    </div>
    <div class="back">
      <ul class="icons">
        <li><i class="mdi fa fa-qq"><span>QQ</span></i></li>
        <li><i class="mdi fa fa-wechat"><span>微信</span></i></li>
        <li><i class="mdi fa fa-weibo"><span>微博</span></i></li>
        <li><i class="mdi fa fa-envelope-o"><span>邮箱</span></i></li>
      </ul>
    </div>
  </div>
</div>