javascript - 通过中心旋转 div 的网格

Question

我试图让 div 元素的网格围绕它的中心旋转。我用谷歌搜索发现 transform-origin 属性可用于锚定旋转。但不知何故，它以其中一个 Angular 作为 anchor 旋转。我需要做什么才能使其工作并围绕网格中心旋转？

var n = 20;

for( var i=0; i<n; ++i){
  for(var j =0; j<n; ++j)
    {
        var div = document.createElement("div");
        div.style.width = "9px";
        div.style.height = "9px";
        div.style.position = "absolute";
        div.style.left = i*10 + "px";
        div.style.top = j*10 + "px";
        div.style.background = "black";
        
        document.getElementById("top-div").appendChild(div);
      
    }
}

var d = 0;
setInterval( function(e) {
  d  = (d +  1)%360;
  document.getElementById("top-div").style.transform = "rotate("+ d  + "deg)";
}, 1);

#top-div{
  transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;

}

<div id='top-div'></div>

使用 Google Chrome 版本 57.0.2987.98(64 位)

Answer 1

问题是您没有为旋转的 div 设置宽度和/或高度；它需要一个宽度和高度来计算 anchor 的位置。

var n = 20;

for (var i = 0; i < n; ++i) {
  for (var j = 0; j < n; ++j) {
    var div = document.createElement("div");
    div.style.width = "9px";
    div.style.height = "9px";
    div.style.position = "absolute";
    div.style.left = i * 10 + "px";
    div.style.top = j * 10 + "px";
    div.style.background = "black";

    document.getElementById("top-div").appendChild(div);

  }
}

var d = 0;
setInterval(function(e) {
  d = (d + 1) % 360;
  document.getElementById("top-div").style.transform = "rotate(" + d + "deg)";
}, 1);

#top-div {
  transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -o-transform-origin: center center;
  height: 200px;
  width: 200px;
}

<div id='top-div'></div>