vue怎么实现点击翻转效果

本篇内容介绍了"vue怎么实现点击翻转效果"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1、

2、

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

"vue怎么实现点击翻转效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！