vue实现点击翻转效果 vue实现点击翻转效果

用vue简单实现一个点击翻转的效果，供大家参考，具体内容如下
1、

文章图片

2、

文章图片

【vue实现点击翻转效果】3、

文章图片

//html代码测试 demo命名随便复制来的这个是背面内容//在data中定义isTop:false//methods中的方法handleBefore(){if(!this.isTop){this.isTop = true} }, handleAfter(){if(this.isTop){this.isTop = false} }

//css.Demo{width: 375px; height: 300px; margin-top: 50px; /* margin-left: 500px; */position: relative; perspective: 800px; box-sizing: border-box; }.Before{width: 100px; height: 200px; position: absolute; top:0; left: 0; background-repeat: no-repeat; background-position: center center; backface-visibility: hidden; transition: 1.5s; background-image:url('../assets/images/chunfen4.jpg'); border:1px solid yellow; }.After{width: 100px; height: 200px; position: absolute; top:0; left: 0; color: #fff; background-color:#fff; text-indent: 2em; transform: rotateY(-180deg); backface-visibility: hidden; transition: 1.5s; border:1px solid yellow; }.Demo .contain-Before{transform: rotateY(180deg); }.Demo .contain-After{transform: rotateY(0deg); }

大功告成，如果想要滑过翻转的话自行去掉事件，给div添加 :hover 方法
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。