代码之家 › 专栏 › 技术社区 › Regster Up

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

transition css html javascript

Regster Up · 技术社区 · 6 年前

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

问题是,如果旋转数据从例如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>

1 回复 | 直到 6 年前

Facundo Corradini 6 年前

旋转到-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>

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