微信小程序25__实现卡片变换

先看效果图

实现代码如下：

<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="../image/doll.png" style="filter:hue-rotate({{-rotation}}deg)" /><view class="title">测试</view><view style="margin-top:30px">{{item.title}}</view></view></view>
</view>

Page({data: {rotation: 0,list: [{color: "pink",title: "welcom to susu1",},{ color: "pink",title: "welcom to bbq2",},{ color: "pink",title: "welcom to xx3",},{color: "pink",title: "welcom to yyy4",}]}, toPrev(){let rotation1 = this.data.rotation;rotation1 += 90;this.setData({rotation:rotation1 })},toNext() {let rotation_ = this.data.rotation;rotation_ -= 90;this.setData({rotation: rotation_})}
})

.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: #000000;height: 4vh;margin-top: -2vh;opacity: 1;position: absolute;top:50%;-webkit-transform: scaleX(0.8);transform: scaleX(0.8);transition: opacity 200ms linear;width: 4vh;-webkit-transform: rotate(0deg);border: solid #fff;border-width: 0 3px 3px 0;display: inline-block;padding: -1px;right: 30px;
}.prev {z-index: 11;color:#000;height: 4vh;margin-top: -2vh;opacity: 0.7;position: absolute;top:50%;-webkit-transform: scaleX(1);transform: scaleX(1);transition: opacity 200ms linear;width: 4vh;-webkit-transform: rotate(0deg);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;top: 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 {top: 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;
}.page-item image {border-radius:50%;width: 150px;height: 150px;margin-top: 200px;
}