<div class="box">
<div class="positive" :class="onoff == 1 ? '' : 'positive'"></div>
<div class="anti" :class="onoff == 0 ? '' : 'anti'"></div>
</div>
export default {
data() {
return {
onoff:1,
}
}
}
<style>
.box{
transform-style:preserve-3d;
.positive{
transition:0.6s;
z-index: 2;
}
.anti{
transition:0.6s;
z-index:1;
}
.positive{
transform:rotateY(180deg);
z-index: 1;
}
.anti{
transform:rotateY(-180deg);
z-index: 1;
}
}
</style>
css3实现正反面翻转效果
最新推荐文章于 2024-02-19 08:56:23 发布