.rotateChart{
    position: relative;
    font-size: 14px;
    color: var(--color);
}
.rotateChart .chart{
    width: 100%;
    height: 100%;
    position: absolute;
}

.rotateChart .text{
  
    font-size: 30px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding-bottom: 4px;
}

.box-3d-content{
    width: 100%;
    height: 100%;
    position: relative;
    transform-origin: 50%; 
    transform: translateZ(-85px) rotateY(0deg) rotateX(0deg);
    transition: transform 0.5s linear;
    transform-style: preserve-3d;

}
.box-3d-content>div{
    width: 100%;
    height: 100%;
   
    position: absolute;
    left: 0;
    top: 0;
}

.box-3d-content>div:nth-child(1){
    transform: translateZ(84px)
}
.box-3d-content>div:nth-child(2){
    transform: rotateY(90deg) translateZ(84px);
}
.box-3d-content>div:nth-child(3){
    transform: rotateY(-90deg) translateZ(84px);
}
.box-3d-content>div:nth-child(4){
    transform: rotateX(-90deg) translateZ(84px);
}
.box-3d-content>div:nth-child(5){
    transform: rotateX(90deg) translateZ(84px);
}