微信小程序rotateZ实现卡片翻转

1.实现效果

2.实现原理

css的filte：hue-rotate(deg)
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

css的transform：rotateZ(deg)
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

动态的设置hue-rotate和rotateZ角度，实现页面切换，并改变背景颜色
同时设置图片hue-rotate与父元素的相反，做到不影响子元素的滤镜

3.实现代码

<view class="page" style="filter:hue-rotate({{rotation}}deg)"><view class="prev" catchtap="toPrev"></view><view class="next" catchtap="toNext"></view><view class="stage" style="transform:rotateZ({{rotation}}deg)"><view wx:for="{{list}}" wx:key="index" class="page-item"><image src="https://i.postimg.cc/qRRLS16Q/susu0.jpg" style="filter:hue-rotate({{-rotation}}deg)" /><view class="title">测试</view><view style="margin-top:30px">{{item.title}}</view></view></view>
</view>

.page {position: relative;z-index: 11;width: 100%;height: 100vh;overflow: hidden;background-image: linear-gradient(135deg, #ec8845 0%, #c495f3 100%);transition: -webkit-filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-filter 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}.next {z-index: 11;color: #fff;height: 4vh;margin-top: -2vh;opacity: 0.2;position: absolute;top: 50%;-webkit-transform: scaleX(0.8);transform: scaleX(0.8);transition: opacity 200ms linear;width: 4vh;-webkit-transform: rotate(-45deg);border: solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: -1px;right: 30px;
}.prev {z-index: 11;color: #fff;height: 4vh;margin-top: -2vh;opacity: 0.2;position: absolute;top: 50%;-webkit-transform: scaleX(0.8);transform: scaleX(0.8);transition: opacity 200ms linear;width: 4vh;-webkit-transform: rotate(135deg);border: solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: -1px;left: 30px;
}.stage {width: 750rpx;height: 100vh;left: 0;position: absolute;bottom: 0;-webkit-transform-origin: 50% 150%;transform-origin: 50% 150%;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);transition: -webkit-transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);transition: transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955), -webkit-transform 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);}.page-item {bottom: 0;left: 0;height: 100%;padding: 0 5vh;position: absolute;text-align: center;-webkit-transform-origin: 50% 150%;transform-origin: 50% 150%;width: 100%;color: #fff;box-sizing: border-box;
}.page-item:nth-child(2) {-webkit-transform: rotateZ(90deg);transform: rotateZ(90deg);
}.page-item:nth-child(3) {-webkit-transform: rotateZ(180deg);transform: rotateZ(180deg);
}.page-item:nth-child(4) {-webkit-transform: rotateZ(270deg);transform: rotateZ(270deg);
}.title {font-size: 30px;text-align: center;margin-top: 30px;
}.page-item image {border-radius: 50%;width: 50px;height: 50px;margin-top: 400px;
}

Page({data: {rotation: 0,list: [{color: "pink",title: "welcomwe to susu1",},{color: "pink",title: "welcomwe to bbq2",},{color: "pink",title: "welcomwe to xx3",},{color: "pink",title: "welcomwe to yyy4",},]},......})

4.完整代码，关注公众号苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序rotateZ实现卡片翻转相关推荐

微信小程序分享海报/卡片生成时一直加载可能存在的问题
微信小程序分享海报/卡片生成时一直加载可能存在的问题很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
微信小程序手势滑动卡片案例
最近工作中有项目要使用微信小程序技术进行开发,其中一项功能困扰了我很久,卡片滑动动效以及手势识别.经过一番研究和参考,现在把成果展示.记录自己踩到的坑,如果大家有需要,也可以帮助到大家. 效果图: 首 ...
微信小程序开发之卡片分享
前言在微信小程序的开发中,可能会涉及到一个功能,就是卡片分享,卡片分享的主要技术点就是canvas(画布),这篇文章就是记录一下如何用canvas制作一个卡片分享. 开发准备本篇文章中用到的小程序 ...
微信小程序读取NFC卡片数据，NDEF-M1
最近来了个离谱的需求,要用微信小程序读写NFC卡数据,微信官方文档可以说是垃圾的一批了,啥都没有,踩了好几天坑把整体思路记录一下. 首先调用微信自带的方法 const adapter = wx.get ...
微信小程序点击卡片切换动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: html <view class='aa'><image animation=&qu ...
微信小程序分享接口卡片图片尺寸比例
调用微信小程序分享需要button标签 <button open-type="share">test</button> 然后在js的page里加一个函数 o ...
微信小程序||可滑动卡片
效果图这次使用到了小程序的swiper组件,CSS的transform属性做动画,JS的数据同步利用小程序的swiper组件创建滑块来让图片进行左右滑动,创建之后图片之间的滑动是不会产生大小变 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序导航：免费视频+精品教程+DEMO集合（长期更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

微信小程序rotateZ实现卡片翻转

1.实现效果

2.实现原理

3.实现代码

4.完整代码，关注公众号苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序rotateZ实现卡片翻转相关推荐

最新文章

热门文章

微信小程序rotateZ实现卡片翻转

1.实现效果

2.实现原理

3.实现代码

4.完整代码，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！

微信小程序rotateZ实现卡片翻转相关推荐

最新文章

热门文章

4.完整代码，关注公众号苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！