i want to make webGL from this link. but how make function auto rotation to this object?

like this link link

i try to change controls, but not working

controls.autoRotate = true;
controls.autoRotateSpeed = 2.0

I tried to use the running css animation, but the animation didn't run smoothly

#container > div > div{
    animation: rotate 60s infinite;
    /*animation-direction: alternate;*/
}   

@keyframes rotate {
    0% {
       transform: translateZ(910.789px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -3000, 1) translate(374px, 331.5px)
    }
    20%{
       transform: translateZ(910.789px) matrix3d(0.422333, 0.00978346, 0.906388, 0, -0.0240147, -0.99947, 0.0219779, 0, -0.906123, 0.0310486, 0.421874, 0, 0, 0, -3000, 1) translate(374px, 331.5px)
    }
    40%{
       transform: translateZ(910.789px) matrix3d(-0.512136, 0.0445579, 0.857748, 0, -0.0523909, -0.998414, 0.0205841, 0, -0.857305, 0.0343963, -0.513658, 0, 0, 0, -3000, 1) translate(374px, 331.5px)
    }
    60%{
       transform: translateZ(910.789px) matrix3d(-0.92445, 0.0518886, -0.377756, 0, -0.0511932, -0.998618, -0.0118894, 0, 0.377851, -0.00834738, -0.925829, 0, 0, 0, -3000, 1) translate(374px, 331.5px)
    }
    80%{
       transform: translateZ(910.789px) matrix3d(0.157329, 0.0213622, -0.987315, 0, -0.0238435, -0.999392, -0.025423, 0, 0.987258, -0.0275409, 0.156724, 0, 0, 0, -3000, 1) translate(374px, 331.5px)
    }
    100%{
        transform: translateZ(910.789px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 0, 0, -3000, 1) translate(374px, 331.5px)
    }
}

please help me to solve this problem, thank you