微信小程序实现点击卡片 翻转效果       这篇文章主要介绍了微信小程序实现点击卡片 翻转效果本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

动画效果：

  

wxml:

 view 
 !--正面的框 -- 
 view animation="{{animationMain}}" bindtap='rotateFn' data-id="1" 
 image src="" /image 
 /view 
 !--背面的框 -- 
 view animation="{{animationBack}}" bindtap='rotateFn' data-id="2" 
 image src="" /image 
 /view 
 /view 

wxss: 

.main {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 300px;
 height: 300px;
 transform: translate(-50%,-50%);
 -webkit-perspective: 1500;//子元素获得透视效果 
 -moz-perspective: 1500;
.box {
 position: absolute;
 top: 0;
 left: 0;
 width: 300px;
 height: 300px;
 transition: all 1s;
 backface-visibility: hidden;
 border-radius: 10px;
 cursor: pointer;
.box image{
 border-radius: 10px;
 width: 100%;
 height: 100%;
 background:skyblue;
.b2 {
 background:tomato;
 transform: rotateY(-180deg);
Page({
 data: {
 animationMain:null,//正面
 animationBack:null,//背面
 rotateFn(e) {
 var id = e.currentTarget.dataset.id
 this.animation_main = wx.createAnimation({
 duration:400,
 timingFunction:'linear'
 this.animation_back = wx.createAnimation({
 duration:400,
 timingFunction:'linear'
 // 点击正面
 if (id==1) {
 this.animation_main.rotateY(180).step()
 this.animation_back.rotateY(0).step()
 this.setData({
 animationMain: this.animation_main.export(),
 animationBack: this.animation_back.export(),
 // 点击背面
 else{
 this.animation_main.rotateY(0).step()
 this.animation_back.rotateY(-180).step()
 this.setData({
 animationMain: this.animation_main.export(),
 animationBack: this.animation_back.export(),
})

总结

以上所述是小编给大家介绍的微信小程序实现点击卡片 翻转效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！