css 翻卡

[XJIANBIN]

<li
                class="card-item pointer"
                :class="[{ active: item.select == 1 }, { light: item.level == 1 }]"
                v-for="(item, index) in pageInfo.layout"
                @click="item.select = 1"
                :key="index"
            >
                <div class="card card-front"></div>
                <div class="card card-back">
                    <img :src="item.icon" alt="" />
                </div>
            </li>

 .card-item {
            position: relative;

            @include wh(145, 145);
            @include flexCenter;

            &.active {
                cursor: default;
            }

            img {
                position: relative;
                z-index: 21;
                display: block;
                max-width: 60%;
                max-height: 60%;
            }

            .card {
                position: absolute;
                top: 0;
                left: 0;

                @include wh(145, 145);
                @include flexCenter;
            }

            .card-front {
                z-index: 1;

                @include bg('~@img/formation-game/grab-coin/card-n.png');
            }

            .card-back {
                transform: rotateY(180deg);

                @include bg('~@img/formation-game/grab-coin/card-a.png');
            }

            &.active {
                .card-front {
                    animation: 0.45s ease-out 0s 1 normal both running slit-in-vertical-front;
                }

                .card-back {
                    animation: 0.45s ease-out 0s 1 normal both running slit-in-vertical-back;
                }
            }
        }


@keyframes slit-in-vertical-front {
    0% {
        transform: translateZ(0) rotateY(0) scale(1);
    }

    54% {
        opacity: 1;
        transform: translateZ(-160px) rotateY(87deg) scale(0.85);
    }

    100% {
        opacity: 0;
        transform: translateZ(-800px) rotateY(180deg) scale(1);
    }
}

@keyframes slit-in-vertical-back {
    0% {
        opacity: 0;
        transform: translateZ(-800px) rotateY(180deg) scale(1);
    }

    54% {
        transform: translateZ(-160px) rotateY(87deg) scale(0.85);
    }

    100% {
        opacity: 1;
        transform: translateZ(0) rotateY(0) scale(1);
    }
}