在CSS3中我们可以利用转换(transform)和过渡(transition)两个属性来实现翻牌效果。
以下是一个简单的例子:
HTML部分:
<div class="card">
<div class="front">Front</div>
<div class="back">Back</div>
</div>CSS部分:
.card {
width: 100px;
height: 100px;
position: relative;
perspective: 1000px;
}
.front, .back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
transition: transform 1s;
}
.front {
background: red;
}
.back {
background: blue;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: rotateY(360deg);
}注释:
- 在.card上设置了perspective属性，用于设定3D视图，单位像素。值越小，3D效果越明显。
- front和back设置了backface-visibility: hidden，使得在翻转的过程中看不到其背面。
- front和back设置了相同的transition属性，使得在翻转的过程中两个面的运动速度相同。
- 在.card :hover .front和.card :hover .back中分别设置了转动的角度。
这样我们的翻牌效果就基本完成了。当我们的鼠标悬停在.card上时，会出现翻牌效果。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/173038.html
