HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
warning:
这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。
以下是实现CSS3打造百度贴吧3D翻牌效果的核心HTML和CSS代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 实现百度贴吧3D翻牌效果</title>
<style>
.tieba {
width: 300px;
height: 200px;
margin: 50px;
perspective: 1000px;
}
.post {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1s;
}
.post div {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.post .front {
background-image: url('img_flowers.jpg');
z-index: 10;
}
.post .back {
background-image: url('img_forest.jpg');
transform: rotateY(180deg);
}
.post:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div class="tieba">
<div class="post">
<div class="front"></div>
<div class="back"></div>
</div>
</div>
</body>
</html>这段代码展示了如何使用CSS3中的transform和transition属性来创建一个简单的3D翻牌效果。当鼠标悬停在.post上时，它会旋转90度，从而显示背面的图片。这个实例简单易懂，适合用于教学目的。
评论已关闭