Question

我有一个非常复杂的问题所以任何帮助都会非常感激。基本上，我有一组需要旋转的图像。

我的实际旋转脚本工作正常（下图）然而，它应该平滑旋转而不是，它会卡入到位。我在StackOverflow上问这个问题，试着找出它为什么要捕捉，而不是顺利旋转。

我正在使用谷歌浏览器作为我的浏览器。

CSS：

.marker {
  transition: ease 5s;
  -webkit-transition: ease 5s;
}

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();

Answer 1

如何执行此操作的真实快速示例。单击红色框，它将旋转到50度。

http://jsfiddle.net/hmXGF/

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

确保声明一个基本变换，因此它有一个值来开始。哦，不要忘记所有精彩的前缀，为其余的浏览器朋友。希望这会有所帮助。

旋转捕捉到新的程度，不容易过渡

1 个答案: