.section3{width: 7.6rem;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    z-index: 30;
}


.section3 .ui_base { /* 中间容器 */
    width: 100%;
    -webkit-perspective: 14rem;
    -moz-perspective: 14rem;
    -ms-perspective: 14rem;
    -o-perspective: 14rem;
    perspective: 14rem;
    -webkit-perspective-origin: 50% 46%;
    -moz-perspective-origin: 50% 46%;
    -o-perspective-origin: 50% 46%;
    -ms-perspective-origin: 50% 46%;
    perspective-origin: 50% 46%;
}


/* 外侧轨道线 */
.section3 .base {
  -webkit-animation: cir 50s linear 0s infinite;
    -o-animation: cir 50s linear 0s infinite;
    -ms-animation: cir 50s linear 0s infinite;
    -moz-animation: cir 50s linear 0s infinite;
    animation: cir 50s linear 0s infinite;
    border-radius: 50%;
    position: absolute;
}
/* 外侧轨道线 */
.u_p3d {
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
/* 轨道位置 */
.section3 .base {
    -webkit-transform: rotateX(80deg) rotateY(-10deg);
    -moz-transform: rotateX(80deg) rotateY(-10deg);
    -o-transform: rotateX(80deg) rotateY(-10deg);
    -ms-transform: rotateX(80deg) rotateY(-10deg);
    transform: rotateX(80deg) rotateY(-10deg);
    position: relative;
    width: 7rem;
    height: 7rem;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0;
    left:0;
}


/* 小圆球  容器 ball_base*/
.section3 .ball_base {
    -webkit-transform-origin: 400% 0%;
    -moz-transform-origin: 400% 0%;
    -ms-transform-origin:400% 0%;
    -o-transform-origin:400% 0%;
    transform-origin:400% 0%;
    width: 0.6rem;
    height: 0.6rem;
    position: absolute;
    cursor: pointer;
}
.section3 .ball_base .ball{
    width: 0.6rem;
    height: 0.6rem;
    cursor: pointer;
}


.section3 .ball_1 { /*  ____ 外侧容器 */
    -webkit-transform: rotateX(-60deg) rotateY(10deg) translate(0, -50%);
    -o-transform: rotateX(-60deg) rotateY(10deg) translate(0, -50%);
    -moz-transform: rotateX(-60deg) rotateY(10deg) translate(0, -50%);
    -ms-transform: rotateX(-60deg) rotateY(10deg) translate(0, -50%);
    transform: rotateX(-60deg) rotateY(10deg) translate(0, -50%);
    position: absolute;
   left:0;
      top: 0%;
}

.section3 .ball_2 { /*  ____ 外侧容器 */
    -webkit-transform: rotateX(-60deg) rotateY(60deg) translate(0, -50%);
    -moz-transform: rotateX(-60deg) rotateY(60deg) translate(0, -50%);
    -o-transform: rotateX(-60deg) rotateY(60deg) translate(0, -50%);
    -ms-transform: rotateX(-60deg) rotateY(60deg) translate(0, -50%);
    transform: rotateX(-60deg) rotateY(60deg) translate(0, -50%);
    position: absolute;
 top: 80%; left: 60%;
}

.section3 .ball_3 { /*  ____ 外侧容器 */
    -webkit-transform: rotateX(-60deg) rotateY(120deg) translate(0,0);
    -o-transform: rotateX(-60deg) rotateY(120deg) translate(0,0);
    -ms-transform: rotateX(-60deg) rotateY(120deg) translate(0,0);
    -moz-transform: rotateX(-60deg) rotateY(120deg) translate(0,0);
    transform: rotateX(-60deg) rotateY(120deg) translate(0,0);
    position: absolute;
 top: 50%; left: -50%;
}

.section3 .ball_4 { /*  ____ 外侧容器  */
    -webkit-transform: rotateX(-60deg) rotateY(180deg) translate(0,0);
    -moz-transform: rotateX(-60deg) rotateY(180deg) translate(0,0);
    -ms-transform: rotateX(-60deg) rotateY(180deg) translate(0,0);
    -o-transform: rotateX(-60deg) rotateY(180deg) translate(0,0);
    transform: rotateX(-60deg) rotateY(180deg) translate(0,0);
    position: absolute;
top: 50%;
    left: 50%;
}
.section3 .ball_5 { /*  ____ 外侧容器 */
    -webkit-transform: rotateX(-60deg) rotateY(45deg) translate(0, -50%);
    -moz-transform: rotateX(-60deg) rotateY(45deg) translate(0, -50%);
    -o-transform: rotateX(-60deg) rotateY(45deg) translate(0, -50%);
    -ms-transform: rotateX(-60deg) rotateY(45deg) translate(0, -50%);
    transform: rotateX(-60deg) rotateY(45deg) translate(0, -50%);
    position: absolute;
top: -30%;left: 50%;
}

.section3 .ball_1 .ball {
    -webkit-transform: rotateY(10deg) rotateZ(10deg);
    -moz-transform: rotateY(10deg) rotateZ(10deg);
    -o-transform: rotateY(10deg) rotateZ(10deg);
    -ms-transform: rotateY(10deg) rotateZ(10deg);
    transform: rotateY(10deg) rotateZ(10deg);

}

.section3 .ball_2 .ball {
    -webkit-transform: rotateY(-50deg) rotateZ(10deg);
    -o-transform: rotateY(-50deg) rotateZ(10deg);
    -ms-transform: rotateY(-50deg) rotateZ(10deg);
    -moz-transform: rotateY(-50deg) rotateZ(10deg);
    transform: rotateY(-50deg) rotateZ(10deg);
}

.section3 .ball_3 .ball {
    -webkit-transform: rotateY(-110deg) rotateZ(10deg);
    -o-transform: rotateY(-110deg) rotateZ(10deg);
    -moz-transform: rotateY(-110deg) rotateZ(10deg);
    -ms-transform: rotateY(-110deg) rotateZ(10deg);
    transform: rotateY(-110deg) rotateZ(10deg);
}

.section3 .ball_4 .ball {
    -webkit-transform: rotateY(-170deg) rotateZ(10deg);
    -o-transform: rotateY(-170deg) rotateZ(10deg);
    -moz-transform: rotateY(-170deg) rotateZ(10deg);
    -ms-transform: rotateY(-170deg) rotateZ(10deg);
    transform: rotateY(-170deg) rotateZ(10deg);
}

.section3 .ball_5 .ball {
    -webkit-transform: rotateY(-230deg) rotateZ(10deg);
    -o-transform: rotateY(-230deg) rotateZ(10deg);
    -moz-transform: rotateY(-230deg) rotateZ(10deg);
    -ms-transform: rotateY(-230deg) rotateZ(10deg);
    transform: rotateY(-230deg) rotateZ(10deg);
}


.section3 .ball {
    -webkit-transition: all 2s ease-out 0ms;
    -o-transition: all 2s ease-out 0ms;
    -moz-transition: all 2s ease-out 0ms;
    -ms-transition: all 2s ease-out 0ms;
    transition: all 2s ease-out 0ms;
    -webkit-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-size: 100% 100%;
    text-align: center;
    width: 0.9rem;
    height: 0.9rem;
}



.section3 .ball_1 .ball {
   -webkit-transition-delay: 500ms;
   -moz-transition-delay: 500ms;
   -ms-transition-delay: 500ms;
   -o-transition-delay: 500ms;
   transition-delay: 500ms;
}

.section3 .ball_2 .ball {
   -webkit-transition-delay: 500ms;
   -moz-transition-delay: 500ms;
   -ms-transition-delay: 500ms;
   -o-transition-delay: 500ms;
   transition-delay: 500ms;
}

.section3 .ball_3 .ball {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

.section3 .ball_4 .ball {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}

.section3 .ball_5 .ball {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -ms-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}


.section3 .ball_1 .ball {
    -webkit-animation: cir1 50s linear 0s infinite;
    -o-animation: cir1 50s linear 0s infinite;
    -ms-animation: cir1 50s linear 0s infinite;
    -moz-animation: cir1 50s linear 0s infinite;
    animation: cir1 50s linear 0s infinite
}

.section3 .ball_2 .ball {
    -webkit-animation: cir2 50s linear 0s infinite;
    -o-animation: cir2 50s linear 0s infinite;
    -ms-animation: cir2 50s linear 0s infinite;
    -moz-animation: cir2 50s linear 0s infinite;
    animation: cir2 50s linear 0s infinite
}

.section3 .ball_3 .ball {
    -webkit-animation: cir3 50s linear 0s infinite;
    -o-animation: cir3 50s linear 0s infinite;
    -ms-animation: cir3 50s linear 0s infinite;
    -moz-animation: cir3 50s linear 0s infinite;
    animation: cir3 50s linear 0s infinite
}

.section3 .ball_4 .ball {
    -webkit-animation: cir4 50s linear 0s infinite;
    -o-animation: cir4 50s linear 0s infinite;
    -ms-animation: cir4 50s linear 0s infinite;
    -moz-animation: cir4 50s linear 0s infinite;
    animation: cir4 50s linear 0s infinite
}

.section3 .ball_5 .ball {
    -webkit-animation: cir5 50s linear 0s infinite;
    -o-animation: cir5 50s linear 0s infinite;
    -ms-animation: cir5 50s linear 0s infinite;
    -moz-animation: cir5 50s linear 0s infinite;
    animation: cir5 50s linear 0s infinite
}



@-webkit-keyframes cir1 {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-360deg) rotateZ(10deg)
    }
}

@keyframes cir1 {
    0% {
        transform: rotateY(0deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-360deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir2 {
    0% {
        -webkit-transform: rotateY(-60deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-420deg) rotateZ(10deg)
    }
}

@keyframes cir2 {
    0% {
        transform: rotateY(-60deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-420deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir3 {
    0% {
        -webkit-transform: rotateY(-120deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-420deg) rotateZ(10deg)
    }
}

@keyframes cir3 {
    0% {
        transform: rotateY(-120deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-480deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir4 {
    0% {
        -webkit-transform: rotateY(-180deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-540deg) rotateZ(10deg)
    }
}

@keyframes cir4 {
    0% {
        transform: rotateY(-180deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-540deg) rotateZ(10deg)
    }
}

@-webkit-keyframes cir5 {
    0% {
        -webkit-transform: rotateY(-90deg) rotateZ(10deg)
    }
    100% {
        -webkit-transform: rotateY(-360deg) rotateZ(10deg)
    }
}

@keyframes cir5 {
    0% {
        transform: rotateY(-90deg) rotateZ(10deg)
    }
    100% {
        transform: rotateY(-360deg) rotateZ(10deg)
    }
}


@keyframes cir {
    0% {
        transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg)
    }
    100% {
        transform: rotateX(60deg) rotateY(0deg) rotateZ(-360deg)
    }
}

@-webkit-keyframes cir {
    0% {
        -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg)
    }
    100% {
        -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-360deg)
    }
}



@media screen and (max-width:767px) {
.section3 .ball_base .ball{width: 1.2rem;
    height: 1.2rem;}
.section3 .ball{width: 1.2rem;
    height: 1.2rem;}	

}