標籤：abs 實現圖 meta back pre http pos front :hover
<!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實現圖片翻轉
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
