<!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>
用css實現圖片翻轉
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。