/*
  椭圆会使内部失真    transform: rotateX(50deg);
*/
.rotation3D{
    position: relative; width: 800px; height: 800px; cursor: move; user-select: none;
    margin: 0 auto; margin-top: -100px;
    /*border: 1px solid white; border-radius: 100%;*/
}
.rotation3D .center{
    display: none;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
}

.rotation3D .itemList{ position: absolute; width: 100%; height: 100%; z-index: 20; }
.rotation3D .lineList{
    position: absolute; width: 100%; height: 100%; z-index: 10;
    transform-style: preserve-3d;
}

/*---------------------------点样式---------------------------*/
.rotation3D__item{
    position: absolute; display: block; cursor: pointer; width: 161px; height: 188px;
    text-align: center; line-height: 30px; font-size: 16px; color: white;
    /*background: #2292ef; border-radius: 4px;*/
}
.rotation3D__item .scale{ position: absolute; top: 0; width: 100%; height: 100%; }
.rotation3D__item .cont{ position: relative; z-index: 2; }
.rotation3D__item .cont .iconfont { font-size: 28px; margin-top: 30px; margin-bottom: 60px; display: block; }
.rotation3D__item .cont p{ color: #fff; }

.rotation3D__item.site{ color: #01e9fc; }
.rotation3D__item.pictures{ color: #02e943; }
.rotation3D__item.tools{ color: #ffd200; }
.rotation3D__item.store{ color: #ff2266; }
.rotation3D__item.card{ color: #112233; }
.rotation3D__item.mail{ color: #01e9fc; }

/*底座*/
.rotation3D__item .baseImg{ position: absolute; width: 100%; height: 100%; z-index: 1; }
.rotation3D__item.site .baseImg{ background: url("../images/site.png"); }
.rotation3D__item.pictures .baseImg{ background: url("../images/pictures.png"); }
.rotation3D__item.tools .baseImg{ background: url("../images/tools.png"); }
.rotation3D__item.store .baseImg{ background: url("../images/store.png"); }
.rotation3D__item.card .baseImg{ background: url("../images/card.png"); }
.rotation3D__item.mail .baseImg{ background: url("../images/mail.png"); }
/*---------------------------
    线样式
    线高为总高的一般
---------------------------*/
.rotation3D__line{
    position: absolute; left: 50%; top: 50%;
    display: block; width: 2px; height: 50%;
    padding-top: 60px; color: #fff; font-size: 50px;
    /*background: #fff;*/
    /*原点设置在中间*/
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}
.rotation3D__line .pos{ position: absolute; top: 0; }
.rotation3D__line svg { position: absolute; top: 0; }
.rotation3D__line svg path {
    stroke: #fff; fill: none;
    stroke-width: 3;
    animation: path-animation 100s linear 0s infinite normal;
}
@keyframes path-animation {
    0% { stroke-dashoffset:500; }
    100% { stroke-dashoffset:0; }
}
.rotation3D__line .dot {
    position: absolute; top: 0; left: 0; text-align: center;
    /*width: 35px; height: 35px; font-size: 35px; */
    width: 24px; height: 24px; font-size: 24px;
}
.rotation3D__line .dot1,.rotation3D__line .dot3{
    animation: svg-path-animation 6s ease-in-out 0s infinite normal;
}
.rotation3D__line .dot1{
    offset-path: path("M0 400, 0 0"); offset-distance: 0%;
}
.rotation3D__line .dot2{
    offset-path: path("M0 200, 0 0"); offset-distance: 0%;
    background: #ffd200; border-radius: 100%;
    font-size: 22px; color: #000;
}
.rotation3D__line .dot3{
    offset-path: path("M0 400, 0 0"); offset-distance: 0%;
}
@keyframes svg-path-animation {
    from {offset-distance: 100%;}
    to {offset-distance: 0%;}
}

/*颜色*/
.rotation3D__line.site { color: #00ff5b; }
.rotation3D__line.pictures { color: #00ff5b; }
.rotation3D__line.tools { color: #00ff5b; }
.rotation3D__line.store { color: #07b2f9; }
.rotation3D__line.card { color: #ff6633; }
.rotation3D__line.mail { color: #ff0099; }

.rotation3D__line.site svg path { stroke: #00ff5b; }
.rotation3D__line.pictures svg path { stroke: #00ff5b; }
.rotation3D__line.tools svg path { stroke: #00ff5b; }
.rotation3D__line.store svg path { stroke: #07b2f9; }
.rotation3D__line.card svg path { stroke: #ff6633; }
.rotation3D__line.mail svg path { stroke: #ff0099; }