vue+transform 3D图片长廊

<template>
    <div class="web-box">
        <div class="header" style="font-size: 5vh;color: #ffffff">
            标题
        </div>
        <div class="content">
            <div class="c-left c-btn" :class="{isDisabled: active === 0}" @click.stop="changeActive(-1)"></div>
            <div class="img-list" :style="{left: active * -15 + 'vw'}">
                <div class="img-item" :class="{
                        'active': active === i,
                        'active-1': active - i === 1,
                        'active-2': active - i === 2,
                        'active-3': active - i === 3,
                        'active1': i - active === 1,
                        'active2': i - active === 2,
                        'isActive': i - active === 2 && isActive > 0,
                        'isActive1': i - active === 3 && isActive < 0,
                        'activeTime': i - active === 2 && activeTime > 0,
                        'activeTime2': i - active === 3 && activeTime < 0,
                        'active3': i - active === 3,
                        'active4': i - active === 4,
                        'active5': i - active === 5,
                        'active6': i - active === 6,
                        'active7': i - active === 7,
                        'active8': i - active === 8
                    }" v-for="(b, i) in list" :key="i" @click="openNewPage(b.path)">
                    <img src="https://img1.baidu.com/it/u=2135316162,3264555983&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
                </div>
            </div>
            <div class="c-right c-btn" :class="{isDisabled: active === 3}" @click.stop="changeActive(1)"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                active: 0,
                isActive: 0,
                activeTime: 0,
                list: [
                    {path:''},
                    {path:''},
                    {path:''},
                    {path:''},
                    {path:''},
                    {path:''},
                    {path:''},
                    {path:''},
                    {path:''},
                ]
            }
        },
        methods: {
            openNewPage(path) {
                let routeData = this.$router.resolve({
                    path: path
                });
                window.open(routeData.href,"","","_black");
            },
            changeActive(flag){
                this.active += flag;
                if (this.active <= 0) this.active = 0;
                if (this.active >= 3) this.active = 3;
                this.isActive = Number(flag);
                this.activeTime = Number(flag);
                setTimeout(() => {
                    this.isActive = 0;
                }, 700)
            }
        }
    }
</script>

<style scoped lang="scss">
    .web-box {
        width: 100vw;
        height: 100vh;
        padding: 0;
        overflow: hidden;
        background-image: url("../../img/transfer1/背景.png");
        background-size: 100% 100%;

        .header {
            width: 100%;
            height: 12vh;
            background-image: url("../../img/transfer1/标题.png");
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: start;
            padding-top: 2vh;
            img{
                height: 6vh;
            }
        }

        .content {
            width: 90vw;
            height: 88vh;
            position: relative;
            box-sizing: border-box;
            padding: 25vh 0 0;
            overflow: hidden;
            margin: 0 auto;
            .c-btn{
                width: 5vw;
                height: 6vh;
                position: absolute;
                cursor: pointer;
                top: 55vh;
                background-size: 100% 100%;
                &.c-left{
                    left: 5vw;
                    background-image: url("../../img/transfer1/l-b.png");
                }
                &.c-right{
                    right: 5vw;
                    background-image: url("../../img/transfer1/r-b.png");
                }
                &.isDisabled{
                    opacity: 0.5;
                    pointer-events: none;
                }
            }
            .img-list{
                width: 135vw;
                display: flex;
                flex-wrap: wrap;
                position: relative;
                top: 0;
                transition: left linear 1.6s;
                /*perspective: 3840px;*/
            }
            .img-item {
                width: 14vw;
                height: 10.7vw;
                cursor: pointer;
                transition: transform linear 1.6s;
                margin: 0 0.5vw;

                img {
                    width: 100%;
                    height: 100%;
                }
                &.active-3{
                    transform: rotateY(35deg) rotateX(1deg) rotateZ(-5deg) translateY(1vh) scale(1);
                }
                &.active-2{
                    transform: rotateY(35deg) rotateX(1deg) rotateZ(-5deg) translateY(1vh) scale(1);
                }
                &.active-1{
                    transform: rotateY(38deg) rotateX(8deg) rotateZ(-5deg)  translateY(8vh) scale(1);
                }
                &.active{
                    transform: rotateY(35deg) rotateX(8deg) rotateZ(-5deg)  translateY(1vh) scale(1);
                }
                &.active1{
                    transform: rotateY(29deg) rotateX(5deg) rotateZ(-5deg) translateY(-4vh) scale(0.9);
                }
                &.active2{
                    transform: rotateY(29deg) rotateX(2deg) rotateZ(-4deg) translateY(-7.5vh) scale(0.8);
                }
                &.isActive, &.isActive1{
                    transform: rotateY(0) rotateX(0) rotateZ(0) translateY(-8.5vh) scale(0.72) !important;
                }
                &.activeTime, &.activeTime2{
                    transition-duration: 0.8s !important;
                    transition-timing-function: linear !important;
                }
                &.active3{
                    transform: rotateY(-29deg) rotateX(-2deg) rotateZ(4deg) translateY(-7.5vh) scale(0.8);
                }
                &.active4{
                    transform: rotateY(-32deg) rotateX(-8deg) rotateZ(7deg) translateY(-4vh) scale(0.9);
                }
                &.active5{
                    transform: rotateY(-35deg) rotateX(-8deg) rotateZ(7deg)  translateY(1vh) scale(1);
                }
                &.active6{
                    transform: rotateY(-38deg) rotateX(-8deg) translateY(6vh) scale(1);
                }
                &.active7{
                    transform: rotateY(-41deg) rotateX(-8deg) translateY(11vh) scale(1);
                }
                &.active8{
                    transform: rotateY(-44deg) rotateX(-8deg) translateY(16vh) scale(1);
                }
            }

        }
    }
</style>