实现效果
点击从中间反转到背面，点击在反转回来，来回重复
vue 实现页面居中反转到背面
具体思路
1. 在 data 中设置一个方法，值为 false 2. 给 整个页面的 div 绑定点击事件，执行 data 里的值等于它的相反 3. 设置 css 样式（所有子元素在3D空间中呈现，背向屏幕时不可见，但占据空间，反转度数）
具体实现代码
<template> <div class="box" :class="{ box_rolling: isRolling }" @click="isRolling = !isRolling" > <div class="box_register">1</div> <div class="box_login">2</div> </div> </template> <script> export default { data() { return { isRolling: false, }; }, }; </script> <style lang="scss" scoped> .box { &_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: 0; bottom: 0; right: 0; left: 0; } } .box_rolling { .box_register { transform: rotateY(180deg); //反转180度 visibility: hidden; } .box_login { transform: rotateY(360deg); //反转360度 visibility: visible; } } </style>
以上就是居中反转到背面的代码，不懂得也可以在评论区里问我，以后会持续添加一些新的功能，敬请关注。
