动画效果：

【 -------

差个话题：

演示地址： https://blog.csdn.net/qq_32113629/article/details/106711377

用Node、Express + Vue、 Element-ui Blog、Mysql 实现前后端分离博客管理系统，详情咨询下方技术群

---------】

这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问：

wxml:

<view class='main'><!--正面的框  --><view class="box b1" animation="{{animationMain}}" bindtap='rotateFn' data-id="1" ><image src=""></image></view><!--背面的框  --><view class="box b2" 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%;
}
.b1{background:skyblue;
}
.b2 {background:tomato;transform: rotateY(-180deg);
}

js:

Page({data: {animationMain:null,//正面animationBack:null,//背面},rotateFn(e) {var id = e.currentTarget.dataset.idthis.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(),})}},
})

微信小程序实现点击卡片翻转效果相关推荐

微信小程序实现打卡（翻转效果）
1.实现效果 2.实现原理 perspective定义 3D 元素距视图的距离,以像素计.该属性允许您改变 3D 元素查看 3D 元素的视图. 当为元素定义 perspective 属性时,其子元素会 ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序实现点击拍照长按录像功能
微信小程序实现点击拍照长按录像功能代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序点单左右联动的效果实现
微信小程序点单左右联动的效果实现目标效果原理解析: 点击左边标签会跳到右边相应位置:点击改变rightCur值,转跳相应位置滑动右边,左边标签会跳到相应的位置:监听并且设置每个右边元素的top和 ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序中如何制作瀑布流效果
微信小程序中如何制作瀑布流效果如图是首先,页面布局,页面分为两个部分,左右各一部分,各自插入图片,页面代码如下: <view class="city_history"> ...

微信小程序实现点击卡片翻转效果

动画效果：

这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问：

wxml:

wxss:

js:

微信小程序实现点击卡片翻转效果相关推荐

最新文章

热门文章

微信小程序 实现点击卡片 翻转效果

动画效果：

这个是我本人的，前端技术QQ交流群，有不会的问题，可以在在群里面问：

wxml:

wxss:

js:

微信小程序 实现点击卡片 翻转效果相关推荐

最新文章

热门文章

微信小程序实现点击卡片翻转效果

微信小程序实现点击卡片翻转效果相关推荐