css3实现正反面翻转效果

最新推荐文章于 2024-10-16 20:56:30 发布

原创最新推荐文章于 2024-10-16 20:56:30 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3

前端同时被 2 个专栏收录

50 篇文章

订阅专栏

代码知识

18 篇文章

订阅专栏

本文介绍了一种使用 Vue.js 实现元素切换动画的方法。通过调整元素的旋转角度和层级来实现平滑过渡效果，提供了具体的代码实现方案。

<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>