<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 3d翻转</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery-1.4.2.min2.js"></script>
<script src="js/modernizr.custom.95406.js"></script>
<style>
body{font-size: 12px;}
.Qcontainer{height: 100%;width: 28%;position: relative;-webkit-perspective: 900;float: left;margin-right: 2%;}
.film{width: 100%;height: 38%;-webkit-transform-style: preserve-3d;-webkit-transition:1s;}
.Qcontainer:hover .film{-webkit-transform: rotateY(180deg);z-index: 0;}
.face{position: absolute;-webkit-backface-visibility:hidden;}
.back{width: 66%;height: 127%;-webkit-transform: rotateY(180deg);background: #3b3b3b;background: -webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);padding: 15%;}
.note{display: none;}
.no-csstransforms3d .note{display: none;}
</style>
<script>
</script>
</head>
<body>
<section class="Qcontainer">
<div class="film">
<div class="face front">
<img src="images/20140728180719_564.jpg" />
</div>
<div class="face back">
<h5>hot!</h5>
</div>
</div>
<div class="note">注意：在非谷歌浏览器不能显示</div>
</section>
</body>
</html>