3D 旋转木马效果

参考地址 ： juejin.cn/post/684490…

详细代码：

<template>
    <div id="box">
        <ul>
            <div>测试1</div>
            <div>测试2</div>
            <div>测试3</div>
            <div>测试4</div>
            <div>测试5</div>
        </ul>
    </div>
</template>

<style scoped lang="less">
    * {
        margin: 0px;
        padding: 0px;
    }

    #box {
        width: 200px;
        height: 300px;
        animation: rotate 20s linear infinite;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto;
        transform-style: preserve-3d;
        ul {
            >div {
                color: #ffffff;
                width: 203px;
                height: 61px;
                background: rgba(14,79,154,0.5);
                text-align: center;
                line-height: 61px;
                font-weight: bolder;
                font-size: 26px;
                position: absolute;
                cursor: pointer;
            }
            div:nth-child(1) {
                transform: rotateY(0) translateZ(247px);
            }

            div:nth-child(2) {
                /*rotateY(-72deg) 设置外圈的位置 一圈360 
                translateZ(247px) 设置距离中心点的位置*/
                transform: rotateY(-72deg) translateZ(247px);
            }

            div:nth-child(3) {
                transform: rotateY(-144deg) translateZ(247px);
            }

            div:nth-child(4) {
                transform: rotateY(-216deg) translateZ(247px);
            }

            div:nth-child(5) {
                transform: rotateY(-288deg) translateZ(247px);
            }
        }
    }

    @keyframes rotate {
        0% {
            transform: rotateX(-20deg) rotateY(0);
        }

        50% {
            transform: rotateX(-20deg) rotateY(180deg);
        }

        100% {
            transform: rotateX(-20deg) rotateY(360deg);
        }
    }
</style>