css动画通过连续帧图片生成3D效果

今天上阿里云偶然发现上面有个动画效果非常不错，打算在本地复刻一下。

因为本地没有相应的图片，所以直接下载了一下阿里云官网上面的图片。（版权归属阿里云）

直接上代码：

<template>
    <div class="wrap">
        <div class="imageItem"></div>
    </div>
</template>

<style scoped>
    @keyframes move {
        0% {
            background-position: 0 0
        }
        100% {
            background-position: 0 -1280px;
        }
    }

    @keyframes moveOut {
        0% {
            background-position: 0 -1280px
        }
        100% {
            background-position: 0 0px
            /* 动画帧-1  1340px-64 */
        }
    }

    .imageItem {
        width: 64px;
        height: 64px;
        background-image: url("./3DImage.png");
        background-size: 100%;
        transition: 0.6s;
        animation: moveOut 0.6s forwards steps(20,end);
    }

    .imageItem:hover {
        animation: move 0.6s forwards steps(20,end);
    }
</style>

效果非常不错！

图片地址留下，需要自取。