Question

我的元素有时会被transform: rotate()旋转。我希望使用transition: transform平滑状态之间的转换。问题在于rotate()中的度数被硬编码为始终在-360和+360之间，因此在一个完整的圆度之后，值从359跳到{{} 1}}和动画完全回圆而不是右边的平滑小动画。是否有任何方法可以通过最短的方式进行过渡工作＆＃34;？

更新：角度根据相机位置计算，因此我现在无法使用无限度值。

澄清：我现在无法改变js代码，只能改变CSS。所以目前只有0度。演示只模拟我所处的情况。

DEMO

＆＃13;

[0, 360)

＆＃13;

o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;

document.querySelector("html").addEventListener("mousemove", (e) => {
  if (e.buttons === 1) {
    if (e.movementX > 0) {
      angle += delta;
    }
    if (e.movementX < 0) {
      angle -= delta;
    }
    angle %= FULL_TURN;
    o.style.transform = "rotate(" + angle + "deg)";
    t.innerText = angle + "deg";
  }
})

＆＃13;

#arrow {
  font-size: 6em;
  width: 150px;
  text-align: center;
  user-select: none;
  transform-origin: 50% 60%;
  transition: transform 0.2s linear;
}

＆＃13;

Answer 1

你可以计算＆＃34;轮次＆＃34;并且每轮增加360到你的角度：

value = angle + rounds*360;

请参阅此工作示例：

＆＃13;

o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;
rounds = 0;

document.querySelector("html").addEventListener("mousemove", (e)=>{
	if (e.buttons === 1) {
    if (e.movementX > 0) {
       angle += delta;
       if (angle >= 360) rounds++;
    }
    if (e.movementX < 0) {
       angle -= delta;
       if (angle <= -360) rounds--;
    }
    angle %= FULL_TURN;
    value = angle + rounds*360;
    o.style.transform = "rotate(" + value + "deg)";
    t.innerText = angle + "deg";
  }
})

＆＃13;

#arrow {
  font-size: 10em;
  width: 150px;
  text-align: center;
  user-select: none;
  transform-origin: 50% 60%;
  transition: transform 0.2s linear;
}

body {
  padding: 10px;
}
header {
  margin-bottom: 10px;
}

＆＃13;

<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>

＆＃13;

如何围绕整圆旋转css动画

1 个答案: