javascript - 旋转具有绝对位置的 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>

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

标签： javascripthtmlcss

Answer 1

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

• 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>