SOURCE

const people = document.querySelector('.people');
const img = document.querySelector('.img');
const shoes = document.querySelector('.shoes');
let play = true;
let goId;
let backId;
function go(){
    img.style.transform="rotateY(180deg)";
    shoes.style.animationDirection = 'normal';
    let left;
    if(!people.style.left){
        left = 0;
    }else{
        left = parseInt(people.style.left);
    }
    left+=1;
    if(left>500){
        backId=window.requestAnimationFrame(back)
    }else{
      goId=window.requestAnimationFrame(go)
    }
    people.style.left = left + 'px';
}

function back(){
    img.style.transform="rotateY(0deg)";
    shoes.style.animationDirection = 'reverse';
    let left;
    if(!people.style.left){
        left = 0;
    }else{
        left = parseInt(people.style.left);
    }
    left -= 1;
    if(left<=0){
       goId=window.requestAnimationFrame(go)
    }else{
        backId=window.requestAnimationFrame(back)
    }
    people.style.left = left + 'px';
}

goId=window.requestAnimationFrame(go)

document.addEventListener('click', ()=>{
    play = !play;
    if(play){
        go()
    }else{
        window.cancelAnimationFrame(goId);
        window.cancelAnimationFrame(backId);
    }
})

<div class="people" >
    <img class="img" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.027art.cn%2Fimg%2F2022%2F4%2F12%2F20220412125508889581.jpg&refer=http%3A%2F%2Fimg3.027art.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655950168&t=e5c35324b1c6721f4e82e30d7b97a7e8" alt="">
    <div class="shoes">

    </div>
</div>

body{
    background-color: #fff;
}
.people{
    user-select: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    left: 0;
   img{
       width:200px;
       height: 300px;
       transform: rotateY(180deg);
   }
   .shoes{
       width: 50px;
       height: 50px;
       border-radius: 25px;
       background-color: #000;
       position: relative;
       &::before{
           content: '掘金';
           position: absolute;
           color: #fff;
           font-size: 16px;
           top: 10px;
           left: 10px;
       }
       animation: xuanzhuan1 1s infinite;
   }
}

@keyframes xuanzhuan1{
    from {
        transform: rotate(0)
    }
    to{
        transform: rotate(360deg)
    }
}