快速写一个微信小程序3D效果卡片轮播图

我这人慢热，天生给人距离感，不懂讨好，不喜欢迎合别人，也不愿意将就，合则来，不合则散，享受安静和独处，我向来孤僻

 效果

核心

快速写一个微信小程序3D效果卡片轮播图；使用三元运算符，判断是否当前轮播图片，transform缩放（或者用animation动画）

案例

<template>
    <view>
        <view class="">
            <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
                    previous-margin="80rpx" next-margin="80rpx" :duration="duration" @change="swiperChange">
                <swiper-item v-for="(item, index) in swiperDa" class="swiper-view" :key="index">
                    <view :class="currentIndex == index ? 'swiper-item' : 'swiper-item-ac'"
                          >
                        <image class="all-img" :src="item" mode="aspectFill"></image>
                    </view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            swiperDa: [
                'https://pic.3gbizhi.com/uploadmark/20241030/283f4c886c63832538fcb758c8434f3d.webp',
                'https://pic.3gbizhi.com/uploadmark/20240830/43982827ea764b87d1bc96215d14472e.webp',
                'https://pic.3gbizhi.com/uploadmark/20240826/3cdfa26c51604cda7fd3816c1e391d14.webp',
				'https://pic.3gbizhi.com/uploadmark/20240327/f74aef1265e73139abc4ac8de2f843bf.webp'
            ],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500,
            currentIndex: 0,
        };
    },
    methods: {
        swiperChange(e) {
            this.currentIndex = e.detail.current;
        }
    }
};
</script>
<style>
.swiper {
    height: 400rpx;
}

.swiper-item {
    height: 400rpx;
    border-radius: 20rpx;
    overflow: hidden;
    transform: scaleY(1);
    transition: transform 0.3s;
}

.swiper-item-ac {
    height: 400rpx;
    border-radius: 20rpx;
    overflow: hidden;
	transform: scaleY(0.85);
    transition: transform 0.3s;
}

.swiper-view {
    padding: 0 10rpx;
}

.all-img {
    height: 100%;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
}
</style>