Html 在多分区中，图像在上方标题背景上旋转，大小响应

我试过这段代码的标题，一个女孩的形象在背景和小图像的知识应该从一只手旋转到另一只手

我希望这种效果能够对多设备兼容性做出响应

此外，如果小图像只在手上方可见，这样旋转看起来是半圆形的路径，这将有助于我

正文{
填料：2米；
边缘顶端：5em；
}
#容器{
宽度：400px；
高度：600px；
利润率：10px自动；
边框：0px实心#000；
位置：相对位置；
边界半径：50%；
动画：旋转10秒线性无限；
}
.项目{
宽度：30px；
高度：30px；
线高：30px；
文本对齐：居中；
边界半径：50%；
位置：绝对位置；
背景：#；
动画：旋转10秒线性无限反转；
}
@关键帧旋转{
100% {
变换：旋转（1圈）；
}
}

变量半径=320；//调整以移入和移出项目
变量字段=$（'.item'），
容器=$（“#容器”），
宽度=容器。宽度（），
高度=容器高度（）；
var角度=0，
步长=（2*Math.PI）/fields.length；
字段。每个（函数（）{
var x=Math.round（宽度/2+半径*Math.cos（角度）-$（this.width（）/2）；
变量y=Math.round（高度/2+半径*Math.sin（角度）-$（此）.height（）/2）；
if（window.console）{
console.log（$（this.text（），x，y）；
}
$（this.css）({
左：x+‘px’，
顶部：y+‘px’
});
角度+=步长；
});