javascript - 在原点旋转一个矩形

Question

d3, javascript, css 初学者在这里

我试图在不改变原点的情况下旋转一个矩形。我使用了css变换：旋转（20度）；但它改变了原来的 x 和 y 位置。我尝试使用 transform-origin: 0 0;

但不起作用。请在下面找到代码

https://codepen.io/zubair57/pen/NWjXNQJ

.rotate {
  fill:pink;
   transform: rotate(20deg);
  transform-origin: 0 0;
}

标签： javascriptcssd3.js

Answer 1

在您的示例中，您应该添加

transform-origin: 240px 225px;

这是因为 y+w/2 和 x+h/2