我如何使用 JS 在 HTML/CSS 中完成 1° 和 359° 之间的旋转过渡

Question

我正在从传感器读取旋转数据并将其发送到我有一个 2D 模型的网页，该模型根据数据进行旋转。我添加了一个 css-transition 来平滑原本不稳定的运动。

问题是如果旋转数据来自例如1° 旋转到 359° 过渡使对象以相反的方式旋转一圈以达到 359°，而不是走最短的路。我该如何改变它？

document.getElementById('button1').onclick = function() {
  var div = document.getElementById('object'),
    deg = 359;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}
document.getElementById('button2').onclick = function() {
  var div = document.getElementById('object'),
    deg = 1;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}

#object {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  text-align: center;
  color: white;
  height: 100px;
  width: 80px;
  margin: 30px;
  background: green;
}

<button id="button1">Go to 359&#176;</button>
<button id="button2">Go to 1&#176;</button>
<br/>
<div id="object">UP</div>

Answer 1

旋转到 -1 将到达那里。

document.getElementById('button1').onclick = function() {
  var div = document.getElementById('object'),
    deg = -1;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}
document.getElementById('button2').onclick = function() {
  var div = document.getElementById('object'),
    deg = 1;
  div.style.webkitTransform = 'rotate(' + deg + 'deg)';
  div.style.mozTransform = 'rotate(' + deg + 'deg)';
  div.style.msTransform = 'rotate(' + deg + 'deg)';
  div.style.oTransform = 'rotate(' + deg + 'deg)';
  div.style.transform = 'rotate(' + deg + 'deg)';
}

#object {
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
  text-align: center;
  color: white;
  height: 100px;
  width: 80px;
  margin: 30px;
  background: green;
}

<button id="button1">Go to 359&#176;</button>
<button id="button2">Go to 1&#176;</button>
<br/>
<div id="object">UP</div>

所以只需使用一些智能计算就可以知道您应该传递正数还是负数...

我如何使用 JS 在 HTML/CSS 中完成 1° 和 359° 之间的旋转过渡

How can i accomplish a rotation-transition between 1° and 359° in HTML/CSS with JS

html

javascript

css

transition