css3实现正反面翻转效果

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