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

Question

问题【已解决】：如何旋转圆形的背景图片？
链接：https://codepen.io/Refath/pen/XaoMEj

你好，我想要将圆形元素的背景图片以相同的角度逆向旋转，以使背景相对于用户保持笔直。

我尝试使用css关键帧，但意识到这并不是最好的主意，并尝试实现给出[1]的解决方案，在一些调整后也失败了。谢谢；任何帮助都将不胜感激（我不是高级网络开发人员，所以在JS等方面没有太多经验）。

@import url('https://fonts.googleapis.com/css?family=Quicksand:500');
body {
  background-image: url(http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg);
}

.circle,
.r1c,
.r2c,
.r3c,
.r4c {
  border: white 2px solid;
  width: 90px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: absolute;
  margin: auto;
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: -5px -5px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  transition: 0.1s ease-in-out;
}

.circle {
  background-image: url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
  background-position: -9px -9px;
}

.r1c:hover,
.r2c:hover,
.r3c:hover,
.r4c:hover {
  width: 108px;
  height: 108px;
  border-radius: 108px;
  transition: 0.3s ease-in;
  background-size: 120px 120px;
  background-position: -5.4px -5.4px;
}

.r1c {
  position: relative;
  overflow: hidden;
  top: 200px;
  background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}

.r2c {
  top: -400px;
  background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}

.r3c {
  left: 400px;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}

.r4c {
  right: 400px;
  background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}

.r1l,
.r2l,
.r3l,
.r4l {
  border: white 1px solid;
  width: 0px;
  height: 90px;
  border-radius: 90px;
  fill: lightred;
  position: absolute;
  margin: auto;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.r1l {
  top: 200px;
}

.r2l {
  top: -200px;
}

.r3l {
  width: 90px;
  height: 0px;
  left: 200px;
}

.r4l {
  width: 90px;
  height: 0px;
  left: -200px;
}

.parent {
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  animation: around 7.5s infinite ease;
}

@keyframes around {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hero {
  color: white;
  font-family: 'Quicksand', sans-serif;
}

<center>
  <h1 class="hero">Hi, User!</h1>
</center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="parent">

  <div class="circle">
  </div>

  <a href="https://www.google.com">
    <div class="r1c">
    </div>
  </a>

  <div class="r2c">
  </div>

  <div class="r3c">
  </div>

  <div class="r4c">
  </div>

  <div class="r1l">
  </div>

  <div class="r2l">
  </div>

  <div class="r3l">
  </div>

  <div class="r4l">
  </div>

</div>

- DarkRunner

---

@keyframes有什么问题吗？ - Maulik

我不确定如何使用它来解决这个问题。正如我所说，我相对经验不足。另外，即使有关键帧，我仍然无法解决如何旋转背景图像的问题。 - DarkRunner

你可以尝试将相同的动画反向应用，像这样：.r1c, .r2c, .r3c, .r4c {animation: around 7.5s infinite linear; animation-direction:reverse} JsFiddle - I haz kode

这个可能真的可行，让我稍微调整一下；谢谢 - DarkRunner

哇，这很棒 @Ihazkode，谢谢！ - DarkRunner

没问题，很高兴你解决了它。 - I haz kode

Answer 1

你想要这样的东西吗：

@import url('https://fonts.googleapis.com/css?family=Quicksand:500');

body{
 background-color:black;
}
 img{
  position:relative;
  width:100%;
  height:100%;
  animation: around 6.5s infinite ease;
  animation-direction:reverse
 }


.circle, .r1c, .r2c, .r3c, .r4c{
 border: white 2px solid;
 width: 90px;
 height: 90px;
 border-radius: 90px;
 fill: lightred;
 
 position: absolute;
 margin: auto;
 
 background-size: 100px 100px;
 background-repeat: no-repeat;
 background-position: -5px -5px;

 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 transition: 0.1s ease-in-out;
}

.circle{
 background-image: url(https://media.giphy.com/media/Ry0QlB6DwmCZO/giphy.gif);
 background-position: -9px -9px;
}

.r1c:hover, .r2c:hover, .r3c:hover, .r4c:hover{
 width:108px;
 height: 108px;
 border-radius:108px;
 transition: 0.3s ease-in;
 background-size: 120px 120px;
 background-position: -5.4px -5.4px;
}

.r1c{ 
 position: relative;
 overflow: hidden;
 
 top: 310px;
 background-image: url("http://icons.iconarchive.com/icons/xenatt/the-circle/512/App-Google-icon.png");
}

.r2c{
 top: -400px;
 background-image: url(https://www.shareicon.net/data/512x512/2015/09/30/109354_media_512x512.png);
}

.r3c{
 left: 400px;
 background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png);
}

.r4c{
 right: 400px;
 background-image: url("https://lh3.googleusercontent.com/mIeBLLu8xOi-1bPbtRO_HYb5d1VchJDLDH4hebMO7R-GNOfueGDtHCKgPWFjwyCAORQ=w300");
}

.r1l, .r2l, .r3l, .r4l{
 border: white 1px solid;
 width: 0px;
 height: 90px;
 border-radius: 90px;
 fill: lightred;
 
 position: absolute;
 margin: auto;
 
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
}

.r1l{
 top: 200px;
}
.r2l{
 top: -200px;
}

.r3l{
 width: 90px;
 height: 0px;
 
 left: 200px;
}

.r4l{
 width: 90px;
 height: 0px;
 
 left: -200px;
}

.parent {
 
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 position:absolute;
 animation: around 7.5s infinite ease;
}

@keyframes around{
 0% {transform: rotate(0deg);}
 25% {transform: rotate(90deg);}
 
 25% {transform: rotate(90deg);}
 50% {transform: rotate(180deg);}
 
 50% {transform: rotate(180deg);}
 75% {transform: rotate(270deg);}
 
 75% {transform: rotate(270deg);}
 100% {transform: rotate(360deg);}
 }

.hero{
 color:white;
 font-family: 'Quicksand', sans-serif;
}

<img src='http://1.bp.blogspot.com/-cynjeO46IAM/UBUmNk0NnxI/AAAAAAAAAqg/jpqpb_LMn6U/s1600/tR2hW.jpg'/>
<center> <h1 class = "hero">Hi, User!</h1></center>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class = "parent">
 
<div class = "circle">
 </div>

<a href = "https://www.google.com"><div class = "r1c">
 </div></a>

<div class = "r2c">
 </div>

<div class = "r3c">
 </div>

<div class = "r4c">
 </div>

<div class = "r1l">
 </div>

<div class = "r2l">
 </div>

<div class = "r3l">
 </div>

<div class = "r4l">
 </div>
 
 </div>

- Maulik

---

谢谢回复；看起来让动画倒放实际上是可行的。 - DarkRunner

欢迎您，@DarkRunner。祝编码愉快。 - Maulik