Javascript 将捕捉旋转到新的角度，不会平滑过渡

我有一个相当复杂的问题，所以这里的任何帮助都将不胜感激。基本上，我有一组需要旋转的图像

我的实际旋转脚本在下面运行得很好，但是，它应该平滑地旋转，而不是，它会捕捉到位。我在StackOverflow上问了这个问题，试图找出它为什么会断裂，并且旋转不平稳

我使用谷歌浏览器作为我的浏览器

CSS:

JavaScript:

function setBearings() {
  for (var i = 0; i < markers.length; i++) {
    var bearing = markers[i][BEARING];
    var service = markers[i][SERVICE];
    var reg = markers[i][REGISTRATION];

    if (bearing != -1) {
      $(".marker.id-" + reg).css({
        'transform':'rotate('+bearing+'deg)',
        '-webkit-transform':'rotate('+bearing+'deg)',
        '-moz-transform':'rotate('+bearing+'deg)',
        '-o-transform':'rotate('+bearing+'deg)',
        '-ms-transform':'rotate('+bearing+'deg)'
      });
    }
  }
}

function updateInfoBoxes() {
  for (var i = 0; i < markers.length; i++) {
    var googleMarker = getMarkerObject(markers[i][REGISTRATION]);

    actualMarkers[i] = document.createElement("div");
    actualMarkers[i].className = "box";
    actualMarkers[i].addEventListener("click", createHandler(i), false);

    if (markers[i][BEARING] == -1) {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/static.png" />';
    } else {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/dynamic.png" />';
    }

    if (infoBoxes[i])
      infoBoxes[i].setContent(actualMarkers[i]);

    infoBoxes[i] = new InfoBox({
       content: actualMarkers[i]
      ,disableAutoPan: true
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-20, -35)
      ,zIndex: 100000
      ,boxStyle: { 
        opacity: 1
       }
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    });

    infoBoxes[i].open(map, googleMarker);
  }
  setBearings();
}
updateInfoBoxes();

---

如何做到这一点的真正快速示例。单击红色框，它将旋转到50度

确保您声明了一个基本变换，这样它就有了一个开始的值。

---

哦，还有别忘了所有精彩的前缀，为了你的其他浏览器朋友。希望这有帮助。

您是否考虑过使用.animate而不是.css+转换？它适用于所有浏览器，并且可以预期。非常好的建议，非常感谢。这会有连锁反应吗？我将在多个平台上使用此选项，并希望确保动画尽可能流畅。如果您可以编写一个示例作为答案，我将选择它作为最佳选项：请你做一个fiddle@JoelKidd-我不知道有任何衡量jQuery animate与CSS3转换的基准测试-考虑到后者使用本机浏览器代码来制作动画，而不是DHTML在递归setTimeout循环中通过JavaScript更改CSS属性，我认为后者的性能会更好，这就是jqueryanimate所做的。也就是说，我从未在使用动画时遇到性能问题。我想你会没事的。如果你想支持ie9，它支持转换，但不支持转换。注意使用这个家伙的代码：它允许jquery动画转换。。。

function setBearings() {
  for (var i = 0; i < markers.length; i++) {
    var bearing = markers[i][BEARING];
    var service = markers[i][SERVICE];
    var reg = markers[i][REGISTRATION];

    if (bearing != -1) {
      $(".marker.id-" + reg).css({
        'transform':'rotate('+bearing+'deg)',
        '-webkit-transform':'rotate('+bearing+'deg)',
        '-moz-transform':'rotate('+bearing+'deg)',
        '-o-transform':'rotate('+bearing+'deg)',
        '-ms-transform':'rotate('+bearing+'deg)'
      });
    }
  }
}

function updateInfoBoxes() {
  for (var i = 0; i < markers.length; i++) {
    var googleMarker = getMarkerObject(markers[i][REGISTRATION]);

    actualMarkers[i] = document.createElement("div");
    actualMarkers[i].className = "box";
    actualMarkers[i].addEventListener("click", createHandler(i), false);

    if (markers[i][BEARING] == -1) {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/static.png" />';
    } else {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/dynamic.png" />';
    }

    if (infoBoxes[i])
      infoBoxes[i].setContent(actualMarkers[i]);

    infoBoxes[i] = new InfoBox({
       content: actualMarkers[i]
      ,disableAutoPan: true
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-20, -35)
      ,zIndex: 100000
      ,boxStyle: { 
        opacity: 1
       }
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    });

    infoBoxes[i].open(map, googleMarker);
  }
  setBearings();
}
updateInfoBoxes();

.marker{
    transition: ease 5s;
    -webkit-transition: ease 5s;
    -webkit-transform: rotate(10deg);
    background: red;
    width: 200px;
    height: 20px;
}