在原点旋转一个矩形

Question

d3, javascript, css 初学者

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

但是没有用。请找到下面的代码

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

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

Answer 1

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

transform-origin: 240px 225px;

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