翻牌动效
在开发过程中,遇到翻红包/翻转扑克牌等类似的需求,请看图
话不多说,请看代码:
<div class="container" id="container">
<div class="rp front" />
<div class="rp black" />
</div>
.container {
width: 200px;
height: 400px;
position: relative;
transform-style: preserve-3d; // 开启3D透视
transition: transform 1s ease-in-out;
}
.rp {
left: 0;
top: 0;
position: absolute; // 绝对定位,两张图片要重叠在一块
backface-visibility: hidden; // 隐藏div背后的显示
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
.front {
background-image: url('front.png')
}
.back {
background-image: url('back.png');
transform: rotateY(180deg); // 反面的图片要翻转过来,这样在翻转到部分的时候就能看到背面的图片
}
.flip {
transform: rotateY(180deg); // 点击容器,翻转图片
}
document.getElementById('container').onclick = () => {
this.addClassNames('flip');
}