/* 任务三、设置3D舞台布景 */
            perspective: 200px;
     
            /*任务四、设置3D舞台布景过渡效果*/
            transition: all 0.7s linear;
      
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

                /*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
                .three-d:not(.active):hover .three-d-box,
                .three-d:not(.active):focus .three-d-box {
                    transform: translateZ(-25px) rotateX(90deg);
                }

        .three-d-box {
            /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
            transform: translateZ(-25px);
            transition: all .3s ease-out;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        /*任务七、给导航设置3D前，与3D后变形效果*/
        .front {
            transform: rotateX(0deg) translateZ(25px);
     
        }

        .back {
            transform: rotateX(-90deg) translateZ(25px);
            color: #FFE7C4;
        }