| 本文实例为大家分享了Vue实现牌面翻转效果的具体代码，供大家参考，具体内容如下 1.实现效果实现一个点击沿中心Y轴翻转的翻转效果。 
2.方法分前（front）、后(behind)两部分，behind的div通过css布局设定为将其翻转180度在front的div后面隐藏不显示，点击执行翻转动画，在执行翻转动画的时候设置behind的div显示，之后将front的div隐藏.依次反复。 3.具体代码<template><div id="try"> <!-- box_rolling下执行正面翻转动画 --><div class="rollbox" :class="{'box_rolling':isRolling}" @click="isRolling = !isRolling"> <!-- 前面div --> <div class="rollbox_front"> <div class="contentbox"> <img src="@/assets/images/s1.png"/> </div> </div> <!-- 后面div --> <div class="rollbox_behind"> <div class="contentbox"> <img src="@/assets/images/s2.png"/> </div> </div></div></div></template><script>export default{ name:'try', data(){ return{ isRolling:false } }}</script><style lang='scss'>#try{ .rollbox{ position: relative; perspective: 1000px; width:200px; height: 400px; margin:100px auto; &_front, &_behind{ transform-style: preserve-3d; //表示所有子元素在3D空间中呈现 backface-visibility: hidden; //元素背面向屏幕时是否可见 transition-duration:.5s; transition-timing-function:'ease-in'; background:#008080; .contentbox{ width:200px; height: 400px; display: flex; justify-content: center; align-items: center; >img{ width:100px; } } } &_behind{ transform: rotateY(180deg); visibility:hidden; //元素不可见，但占据空间 position: absolute; top:0; bottom:0; right: 0; left: 0; } } .box_rolling{ .rollbox_front{ transform: rotateY(180deg); visibility:hidden; } .rollbox_behind{ transform: rotateY(360deg); visibility:visible; } }}</style>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue实现点击翻转效果
Vue组件实现旋转木马动画 |
