Html 与div方向相反旋转背景图像

问题[已解决]：如何旋转圆的背景图像？
链接：

您好，我正在尝试将圆形元素的背景图像旋转到相反的方向，但旋转幅度相同，这样背景相对于用户保持笔直

我尝试使用css关键帧，但意识到这不是最好的主意，然后尝试实现[here][1]给出的解决方案，经过一些调整后也失败了。谢谢非常感谢您的帮助（我不是一名高级web开发人员，所以我对JS没有太多经验，等等）

@导入url（'https://fonts.googleapis.com/css?family=Quicksand:500');
身体{
背景图片：url(http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg);
}
圆圈
.r1c，
.r2c，
.r3c，
.r4c{
边框：白色2px实心；
宽度：90px；
高度：90px；
边界半径：90px；
填充物：浅红色；
位置：绝对位置；
保证金：自动；
背景尺寸：100px 100px；
背景重复：无重复；
背景位置：-5px-5px；
顶部：0px；
底部：0px；
左：0px；
右：0px；
转换：0.1s易入易出；
}
.圆圈{
背景图片：url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
背景位置：-9px-9px；
}
.r1c:悬停，
.r2c:悬停，
.r3c:悬停，
.r4c：悬停{
宽度：108px；
高度：108px；
边界半径：108px；
过渡：0.3s缓解；
背景尺寸：120px 120px；
背景位置：-5.4px-5.4px；
}
.r1c{
位置：相对位置；
溢出：隐藏；
顶部：200px；
背景图像：url（“http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c{
顶部：-400px；
背景图片：url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c{
左：400px；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}
.r4c{
右：400px；
背景图像：url（“https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l，
.r2l，
.r3l，
.r4l{
边框：白色1px实心；
宽度：0px；
高度：90px；
边界半径：90px；
填充物：浅红色；
位置：绝对位置；
保证金：自动；
顶部：0px；
底部：0px；
左：0px；
右：0px；
}
.r1l{
顶部：200px；
}
.r2l{
顶部：-200px；
}
.r3l{
宽度：90px；
高度：0px；
左：200px；
}
.r4l{
宽度：90px；
高度：0px；
左：-200px；
}
.家长{
顶部：0px；
底部：0px；
左：0px；
右：0px；
动画：7.5s左右无限轻松；
}
@周围的关键帧{
0% {
变换：旋转（0度）；
}
25% {
变换：旋转（90度）；
}
25% {
变换：旋转（90度）；
}
50% {
变换：旋转（180度）；
}
50% {
变换：旋转（180度）；
}
75% {
变换：旋转（270度）；
}
75% {
变换：旋转（270度）；
}
100% {
变换：旋转（360度）；
}
}
.英雄{
颜色：白色；
字体系列：“流沙”，无衬线；
}

嗨，用户！

您想要这样的东西吗：

@导入url（'https://fonts.googleapis.com/css?family=Quicksand:500');
身体{
背景色：黑色；
}
img{
位置：相对位置；
宽度：100%；
身高：100%；
动画：6.5s左右无限轻松；
动画方向：反转
}
.圆、.r1c、.r2c、.r3c、.r4c{
边框：白色2px实心；
宽度：90px；
高度：90px；
边界半径：90px；
填充物：浅红色；
位置：绝对位置；
保证金：自动；
背景尺寸：100px 100px；
背景重复：无重复；
背景位置：-5px-5px；
顶部：0px；
底部：0px；
左：0px；
右：0px；
转换：0.1s易入易出；
}
.圆圈{
背景图片：url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
背景位置：-9px-9px；
}
.r1c:悬停，.r2c:悬停，.r3c:悬停，.r4c:悬停{
宽度：108px；
高度：108px；
边界半径：108px；
过渡：0.3s缓解；
背景尺寸：120px 120px；
背景位置：-5.4px-5.4px；
}
.r1c{
位置：相对位置；
溢出：隐藏；
顶部：310px；
背景图像：url（“http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}
.r2c{
顶部：-400px；
背景图片：url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}
.r3c{
左：400px；
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}
.r4c{
右：400px；
背景图像：url（“https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}
.r1l、.r2l、.r3l、.r4l{
边框：白色1px实心；
宽度：0px；
高度：90px；
边界半径：90px；
填充物：浅红色；
位置：绝对位置；
保证金：自动；
顶部：0px；
底部：0px；
左：0px；
右：0px；
}
.r1l{
顶部：200px；
}
.r2l{
顶部：-200px；
}
.r3l{
宽度：90px；
高度：0px；
左：200px；
}
.r4l{
宽度：90px；
高度：0px；
左：-200px；
}
.家长{
顶部：0px；
底部：0px；
左：0px；
右：0px；
位置：绝对位置；
动画：7.5s左右无限轻松；
}
@周围的关键帧{
0%{变换：旋转（0度）；}
25%{变换：旋转（90度）；}
25%{变换：旋转（90度）；}
50%{变换：旋转（180度）；}
50%{变换：旋转（180度）；}
75%{变换：旋转（270度）；}
75%{变换：旋转（270度）；}
100%{变换：旋转（360度）；}
}
.英雄{
颜色：白色；
字体系列：“流沙”，无衬线；
}

嗨，用户！

keyframes有什么问题？我不知道如何使用它来解决这个问题。正如我所说，我相对缺乏经验。另外，如何旋转背景图像的问题仍然存在，即使有关键帧。你可以尝试反向应用相同的动画。像这样