CSS 3D 动效

<div id="stage" v-show="box.isShow">
            <div id="box"
                 :class="{
                    'faceA': isFaceA,
                    'faceB': isFaceB,
                    'faceC': isFaceC,
                }"
            >
                <div id="A"></div>
                <div id="B"></div>
                <div id="B"></div>
            </div>
</div>

#stage{
        position: fixed;
        z-index: 1;
        width: 620px;
        min-height: 620px;
        margin-left: -310px;
        left: 50%;
        top:50%;
        perspective: 800px;
        perspective-origin: 50% 10%;
        span{
            padding: 20px;
        }

    }
    #box{

        transform-style: preserve-3d;
        transition: transform 1s;//运动时间
        transform:translateZ(-179px) rotateY(0);

        &.faceA{transform:translateZ(-179px) rotateY(0);}
        &.faceB{transform:translateZ(-179px) rotateY(-120deg);}
        &.faceC{transform:translateZ(-179px) rotateY(-240deg);}

        & > div{
            width: 620px;
            position:absolute;
            backface-visibility: hidden;
        }
        #A{
            transform: rotateY( 0deg ) translateZ(179px);

        }
        #B{
            transform: rotateY( 120deg ) translateZ(179px);
        }
        #C{
            transform: rotateY( 240deg ) translateZ(179px);

        }
    }

image.png

let r = 64 / Math.tan(20 / 180 * Math.PI)