<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用css实现图片翻转</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.flip-container {
perspective:1000px;
}
.flip-container:hover .flipper {
transform:rotateY(180deg);
}
.flip-container,.front,.back {
width:320px;
height:480px;
}
.flipper {
transition:0.6s;
transform-style:preserve-3d;
position:relative;
}
.front,.back {
position:absolute;
}
.back {
transform:rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-container">
<div class="flipper">
<div class="front" style="background-color: red">
<p>正面</p>
</div>
<div class="back" style="background-color: gray">
<p>背面</p>
</div>
</div>
</div><script>
</script>
</body>
</html>
原文：http://www.cnblogs.com/duizijihaodian00/p/7482426.html