需要文檔版源碼來我的前端群581549454，已上傳到群文件
該效果是css3鼠標懸停卡片動畫翻轉切換特效，
圖片和介紹可以自行修改
自行添加想要的圖片到img即可
介紹可在代碼文檔中按需進行修改
下面是源碼
源代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">
<html xmlns="http://www.aaa-cg.com.cn?lcc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3鼠標懸停卡片動畫翻轉切換特效</title>
<style type="text/css">
*{margin:0;padding:0;font-family:"Arial";}
body{background:#222222}
#main{width:962px;height:473px;margin:10px auto;}
#main ul{list-style:none;}
#main ul li{width:320px;height:470px;float:left;position:relative;}
#main ul li img{border:10px solid #F5F5F5;-webkit-transition:1s ease;-moz-transition:1s ease;}
#main .info{width:240px;height:230px;border:10px solid #F5F5F5;background:#deddcd;position:absolute;bottom:-50px;right:0;-webkit-transition:1s ease;-moz-transition:1s ease;-moz-transform:rotatey(30deg);-webkit-transform:rotatey(30deg);}
#main .info h2{text-align:center;line-height:70px;color:#7a3f3a;font-weight:normal;font-size:20px;}
#main .info p{padding:0 20px;font-size:14px;}
#main .info a{display:block;width:100px;height:30px;background:#7a3f3a;color:#FFF;border-radius:5px;text-decoration:none;text-align:center;line-height:30px;margin:10px auto;}
#main ul li:hover .info{-webkit-transform:rotatey(0deg);-moz-transform:rotatey(0deg);right:30px;bottom:-70px;}
#main ul li:hover img{-webkit-transform:rotatey(360deg);-moz-transform:rotatey(360deg);}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div id="main">
<ul>
<li> <img src="img/1a.jpg" alt="Iron Man 1" width="300" height="450" />
<div class="info">
<h2>龍的傳人 李青</h2>
<p>年輕的李青立志要成為一名召喚師，他的決心和奉獻精神是同齡人無可比擬的。李青的才華引起了當時的聯盟高級議員——瑞吉納德丶阿什拉姆的注意。在學習奧術星座魔法時，他對接受和其他學生一樣的課程感到沮喪...</p>
<a href="#">More info</a>
</div>
</li>
<li> <img src="img/1b.jpg" alt="Iron Man 2" width="300" height="450" />
<div class="info">
<h2>兔女郎 瑞文</h2>
<p>在諾克薩斯，每一位居民都可以平步青雲，而無論其種族、男女、貴賤——實力，就是一切。銳雯曾懷著對此理想的堅定信仰，不懈地追求著遠大的前程。她曾是一位初露鋒芒的士兵，那時的她能夠揮動一把與自己差不多重的長劍...</p>
<a href="#">More info</a>
</div>
</li>
<li> <img src="img/1c.jpg" alt="Iron Man 3" width="300" height="450" />
<div class="info">
<h2>皇家火槍手 崔斯特</h2>
<p>崔斯特是一名聲名狼藉的紙牌老千和詐騙慣犯，世界上任何有人煙的地方都有他施展魅力和賭藝的足跡，讓那些富人和痴人既羨慕又嫉恨。他很少會認真起來幹一件事，總是用一抹輕蔑的微笑和一副漫不經心的隨性面對每一天...</p>
<a href="#">More info</a>
</div>
</li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff"><br><br>
<p>適用瀏覽器：360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗. 不支持IE8及以下瀏覽器。</p>
<p>來源：<a href="http://www.aaa-cg.com.cn?lcc/" target="_blank">素材</a></p>
</div>
</body>
</html>