左右正反反转

<template>
	<view class="page">
		<view class="" style="padding: 20rpx;">
			<view class="box" :class="{ box_rolling: isRolling }" >
				<view class="box_register" @click="isRolling = !isRolling">
				正面
				</view>
				<view class="box_login">
					反面
				</view>
			</view>




			


	
	</view>
</template>

<script>
	// import * as indexApi from '@/api'
	// import { editUser } from '@/api/user'
	// import * as goodsApi from '@/api/goods'
	// import { dateFormat, zeroFill } from '@/utils'
	// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
	// import * as customerApi from '@/api/customer.js'
	export default {
		components: {
			// BaiduMap
		},
		data() {
			return {
				isRolling: false,
			}
		},
		
		}
	}
</script>


<style lang="scss" scoped>
	/* 翻转 */
	.box {
		position: relative;
		&_register,
		&_login {
			transform-style: preserve-3d; //表示所有子元素在3D空间中呈现
			backface-visibility: hidden; //元素背面向屏幕时是否可见
			transition-duration: 0.5s; // 0.5秒内反转
			transition-timing-function: "ease-in";
			// background: #008080;
			// height: 100vh;
		}

		&_login {
			transform: rotateY(180deg);
			visibility: hidden; //元素不可见，但占据空间
			position: absolute;
			top: 20;
			bottom: 0;
			right: 0;
			left: 20;
			width: 100%;
		}
	}

	.box_rolling {
		.box_register {
			transform: rotateY(180deg); //反转180度
			visibility: hidden;
		}

		.box_login {
			transform: rotateY(360deg); //反转360度
			visibility: visible;
		}
	}
</style>