aiforge/custom/public/rotation3D/rotation3D.css

/*
  椭圆会使内部失真    transform: rotateX(50deg);
*/
.rotation3D{
    position: relative; width: 800px; height: 600px;  user-select: none;
    margin: 0 auto;
    /* border: 1px solid white; border-radius: 100%; */
    /* cursor: move; */
}
.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; width: 161px; height: 188px;
    text-align: center; line-height: 30px; font-size: 16px; color: white;
    /*background: #2292ef; border-radius: 4px;*/
    /*cursor: pointer; */
}
.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: 96px; display: block; height: 35px;}
.rotation3D__item .cont p{ color: #101010; }
.lineList .rotation3D__line:nth-child(5n+0) .dot{
}
.lineList .rotation3D__line:nth-child(5n+1) .dot{
  animation-delay: 1s;
}
.lineList .rotation3D__line:nth-child(5n+2) .dot{
  animation-delay: 3s;
}
.lineList .rotation3D__line:nth-child(5n+3) .dot{
  animation-delay: 2s;
}
.lineList .rotation3D__line:nth-child(5n+3) .dot{
  animation-delay: 4s;
}
.rotation3D__item.blue{ color: #01e9fc; }
.rotation3D__item.green{ color: #b4b3ca; }
.rotation3D__item.yellow{ color: #ffd200; }

/*底座*/
.rotation3D__item .baseImg{ position: absolute; width: 100%; height: 100%; z-index: 1; }
.rotation3D__item.blue .baseImg{ background: url("img/idc-red.png"); }
.rotation3D__item.green .baseImg{ background: url("img/idc-green.png"); }
.rotation3D__item.yellow .baseImg{ background: url("img/idc-yellow.png"); }

/*---------------------------
    线样式
    线高为总高的一般
---------------------------*/
.rotation3D__line{
    position: absolute; left: 50%; top: 50%;
    display: block; 
    width: 30px; 
    height: 50%;
    padding-top: 60px; color: #fff; font-size: 50px;
    /*background: #fff;*/
    /*原点设置在中间*/
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    overflow: hidden;
  }
.rotation3D__line .pos{ position: absolute; top: 0; left: 15px;}
.rotation3D__line svg { position: absolute; top: 0; }
.rotation3D__line svg path {
    stroke: #fff; fill: none;
    stroke-width: 2;
    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: 19px; height: 19px; font-size: 19px;
}
.rotation3D__line .dot1,.rotation3D__line .dot3,.rotation3D__line .dot4{
    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("M20 400 S 0 200, 20 0"); offset-distance: 0%;
}
.rotation3D__line .dot4{
    position: relative;
    offset-path: path("M20 0 S 40 200, 20 400"); offset-distance: 0%;
}
@keyframes svg-path-animation {
    from {offset-distance: 100%;}
    to {offset-distance: 0%;}
}
.dot1 > span{
    position: absolute;
    font-size: 12px;
    color: #888;
    transform:scale(0.80);
    transform-origin:left;
    white-space: nowrap;
  }

/*颜色*/
.rotation3D__line.blue { color: #07b2f9; }
.rotation3D__line.green { color: #ac94ee; }
.rotation3D__line.yellow { color: #ffd500; }

.rotation3D__line.blue svg path { stroke: #07b2f9; }
.rotation3D__line.green svg path { stroke: #ac94ee; }
.rotation3D__line.yellow svg path { stroke: #ffd500; }