前端实现图片绕指定圆心转动，且图片自身不转动的功能、

div>img
div:
利用css的animation 去做循环
用transform: rotate 去做旋转
然后利用transform-origin: bottom left;指定旋转圆心位置
img 在div旋转的同时 做反向旋转

<template><div class="home"><div class="box"><img src="/static/img/magnifier.png" alt="" /></div></div>
</template><script>export default {name: 'HomeView',data() {return {}},}
</script><style scoped>
.home {width: 100%;height: 100%;
}.box {width: 300px;height: 300px;margin: 0 auto;animation: circle 5s linear infinite;transform-origin: bottom left;
}@keyframes circle {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}
}.box>img {width: 50px;height: 50px;animation: circle 5s linear infinite;animation-direction: reverse;transform-origin: center center;
}
</style>

逆时针旋转 animation 选择反向运行的

<template><div class="home"><div class="box"><img src="/static/img/magnifier.png" alt="" /></div></div>
</template><script>export default {name: 'HomeView',data() {return {}},}
</script><style scoped>
.home {width: 100%;height: 100%;
}.box {width: 300px;height: 300px;margin: 0 auto;animation: circle 5s linear infinite;transform-origin: bottom left;animation-direction: reverse;
}@keyframes circle {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(180deg);}100% {-webkit-transform: rotate(360deg);}
}.box>img {width: 50px;height: 50px;animation: circle 5s linear infinite;/* animation-direction: reverse; */transform-origin: center center;
}
</style>