首先上一下效果图：
在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果，原因是swiper组件自带的style属性限制了3d效果所需要的属性，所以单独写了一个组件。
index.html
<view> rotate.wxml <view> <view bindtouchstart='start' bindtouchend='end'> <block wx:for='{{swiperList}}'> <image src='https://www.jb51.net/{{item.imgsrc}}' data-index='{{index}}'></image> </block> </view> <view> <block wx:for='{{swiperList}}' wx:key='unique'> <view data-i='{{index}}' bindtap='fn'></view> </block> </view> </view> </view>
index.css:
.stage{ perspective: 3000rpx; perspective-origin: 50% 50%; border: 2rpx solid rgba(0, 0, 0, 0.5); padding: 20rpx 28rpx; background: rgba(255, 255, 255,0.8); height: 520rpx; } .wrapper{ height:480rpx; margin-top: 20rpx; transform-style: preserve-3d; position: relative; } .imgBasic{ position: absolute; width:480rpx; height:480rpx; border-radius:10rpx; border: 7rpx solid #fff; } image:nth-child(1){ -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } image:nth-child(2){ left: 260rpx; } image:nth-child(3){ left: 320rpx; } image:nth-child(4){ left: 380rpx; } .fold{ transform: rotateY(-80deg) scale3d(1,0.85,1) translateZ(-10%); -webkit-transform: rotateY(-80deg) scale3d(1,0.85,1); background: rgba(255, 255, 255,0.8); } .swiper-con{ height: 520rpx; } .scrollCon{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: nowrap; background: red; } .itemParent{ position: relative; width: 100%; height: 1000rpx; } .item{ width: 100rpx; float: left; height: 100rpx; } .item-con{ height:500rpx; } swiper-item{ width:480rpx; height:480rpx; } .idx-content { perspective: 1500; } .idx-content .idx-swiper { position: relative; margin: 40rpx 0; padding-bottom: 100%; transform-style: preserve-3d; } .idx-content .idx-swiper .idx-cswp { width: 70%; height: 100%; position: absolute; transform-style: preserve-3d; top: 0; border-radius: 6px; } .idx-content .idx-swiper .idx-cswp image { width: 100%; max-height: 600rpx; } .idx-content .idx-swiper .idx-cswp .swp-title .swp-btime { text-align: center; font-size: 28rpx; } .idx-content .idx-swiper .idx-cswp .swp-title .swp-bname { text-align: center; font-size: 24rpx; } /* 右边的图片展开动画效果 */ @keyframes rotateImage{ from{ transform:rotateY(-80deg); -webkit-transform:rotateY(-80deg); left: 250rpx; } to{ transform: rotateY(0deg) scale3d(1,1,1); -webkit-transform: rotateY(0deg) scale3d(1,1,1); left: 0rpx; } } @keyframes backRotateImage{ from{ transform: roateteY(0deg) scale3d(1,1,1); -webkit-animation: rotateY(0deg) scale3d(1,1,1); filter: contrast(100%) brightness(100%); } to{ transform: rotateY(280deg) scale3d(1,0.85,1); -webkit-animation: rotateY(280deg) scale3d(1,0.85,1); left: 210rpx; } } @keyframes leftMoveAnimation{ from{ /* transform:translateX(-300rpx); */ /* left: 260rpx; */ }to{ transform:translateX(-40%) scale3d(1,0.85,1) rotateY(-80deg); -webkit-transform:translateX(-40%) scale3d(1,0.85,1) rotateY(-80deg); } } @keyframes leftMove2Animation{ from{ }to{ transform:translateX(-35%) scale3d(1,0.85,1) rotateY(-80deg); -webkit-transform:translateX(-35%) scale3d(1,0.85,1) rotateY(-80deg); } } /* 功能介绍：向左边展开，放大，位移操作 */ .swp-left { animation: rotateImage 1s normal; -webkit-animation: rotateImage 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } /* 功能介绍：单独从左侧位移到屏幕的最后侧位置并且播放折叠动画 */ .swp-right { animation: backRotateImage 1s normal; -webkit-animation: backRotateImage 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } /* 右边的动画依次向左移动，放大，旋转操作 */ .move-left1{ transform:rotateY(-80deg) scale3d(1,0.85,1); animation: leftMoveAnimation 1s normal; -webkit-animation: leftMoveAnimation 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } .move-left2{ transform:rotateY(-80deg) scale3d(1,0.85,1); animation: leftMove2Animation 1s normal; -webkit-animation: leftMove2Animation 1s normal; animation-iteration-count:1; animation-fill-mode: forwards; transform-origin: right; backface-visibility: hidden; } .dots{ display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; margin: 0 8rpx; position: absolute; left: 0rpx; right: 0rpx; bottom: 15rpx; } .dot{ margin: 0 8rpx; height: 15rpx; width: 15rpx; background: #da91f5; border-radius: 15rpx; } .active{ width: 40rpx; height: 15rpx; border-radius: 15rpx; }
控制层index.js: