旋转具有绝对位置的img

Question

我正在制作一个div圆形，该div的外侧具有图像。使用javascript，我每4秒将其旋转四分之一。为了防止图像倾斜，我将它们反向旋转。这可以防止它们倾斜，但是会导致它们在圆的圆周上移动。我认为这是因为立场是绝对的。有什么建议吗？

amount=0;
ids=['box1','box2','box3']

setInterval(rotate, 4000);
///clearTimeout(time);

function rotate() {

  document.getElementById("graphicContainer").setAttribute("style", "transform: rotate(" + amount * 2 * Math.PI / (ids.length).toString() + "rad)");

  document.getElementById("box1").setAttribute("style", "transform: rotate(" + -amount * 2 * Math.PI / (ids.length).toString() + "rad)");
  document.getElementById("box2").setAttribute("style", "transform: rotate(" + -amount * 2 * Math.PI / (ids.length).toString() + "rad)");
  document.getElementById("box3").setAttribute("style", "transform: rotate(" + -amount * 2 * Math.PI / (ids.length).toString() + "rad)");

  amount = amount + 1;

}

#graphicContainer div img {
  width: 50px;
  position: absolute;
  transition: all 1.75s ease-in;
  transform-origin: center;
}

#graphicContainer {
  position: relative;
  height: 500px;
  width: 500px;
  border: 1px solid black;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  transition: all 1.75s ease-in;
  transform-origin: center;
  margin: 0px;
}

#box1,
#box2,
#box3 {
  transform-origin: center;
  position: relative;
  transition: all 1.75s ease-in;
  animation-direction: reverse;
}

<div id="graphicContainer">

  <div class="box" id="box1"> <img id="goalsGraphic" src="../images/running.jpg"> </div>

  <div class="box" id="box2"> <img id="workGraphic" src="../images/work.jpg"> </div>
  <div class="box" id="box3"> <img id="progressGraphic" src="../images/progress.jpg"> </div>

</div>

圆圈上应该有另外两个小图像，但是它们正在自己的圆圈中移动，而不是在屏幕截图视图下方移动。

Answer 1

调整了CSS样式
img容器应具有：

• position:absolute，因此他们可以自由移动和定位以匹配圆。
• top: 50%; left: 50%使其变换中心点为圆的中心

img应该具有margin-top: -25%; margin-left: -50%或任何其他允许这么多位移的样式，以说明图像的高度和宽度。

使用translate变换来偏移50％定位

amount=0;
ids=['box1','box2','box3']

setInterval(rotate, 4000);
///clearTimeout(time);

const cssrotfn = a=>`transform: rotate(${a}deg) translate(250px) rotate(${-a}deg)`
const cssrotbyidx = (idx, len)=>cssrotfn(idx * 360/len)
rotate()

function rotate() {
//  document.getElementById("graphicContainer").setAttribute("style", "transform: rotate(" + amount * 2 * Math.PI / (ids.length).toString() + "rad)");

  document.getElementById("box1").setAttribute("style", cssrotbyidx(1+amount,3));
  document.getElementById("box2").setAttribute("style", cssrotbyidx(2+amount,3));
  document.getElementById("box3").setAttribute("style", cssrotbyidx(3+amount,3));

  amount = amount + 1;

}

#graphicContainer div img {
  width: 50px;
  transition: all 1.75s ease-in;
  transform-origin: center;
  
  margin-top: -25%; margin-left: -50%;
}

#graphicContainer {
  position: relative;
  height: 500px;
  width: 500px;
  border: 1px solid black;
  border-bottom-left-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  transition: all 1.75s ease-in;
  transform-origin: center;
  margin: 0px;
}

#box1,
#box2,
#box3 {
  transform-origin: center;
  position: absolute;
  transition: all 1.75s ease-in;
  animation-direction: reverse;
  
  top: 50%; left: 50%;
}

<div id="graphicContainer">

  <div class="box" id="box1"> <img id="goalsGraphic" src="https://i.imgur.com/CW9CiQ6.jpg"> </div>

  <div class="box" id="box2"> <img id="workGraphic" src="https://i.imgur.com/CW9CiQ6.jpg"> </div>
  <div class="box" id="box3"> <img id="progressGraphic" src="https://i.imgur.com/CW9CiQ6.jpg"> </div>

</div>

Answer 2

如果删除 transform-origin：center; 并将位置更改为 absolute 并在圆圈上移动图像，则效果很好

#box1, #box2, #box3 {
    /* transform-origin: center; */
    position: absolute;
    top: 80px;
    left: 80px;
    transition: all 1.75s ease-in;
    animation-direction: reverse;
}