javascript - CSS 旋转。旋转 div 但保持在完全相同的坐标？

Question

所以我只是在玩一个小的 javascript 游戏，构建一个 pacman 游戏。你可以在这里看到它:http://codepen.io/acha5066/pen/rOyaPW

不过我对旋转有疑问。你可以看到，如果你玩它，当​​ pac 旋转时，他指向不同的方向，但他的坐标也发生了一点变化。应该发生的是他应该轮换但在完全相同的位置。

我正在使用 transform-origin: 'center center'; 但我也用 transform-origin: 'top left'; 尝试过但是都没有给我什么我想。

Answer 1

你必须给你的容器一个宽度，否则 transform-origin: x 不会有任何效果(0 的中心仍然是 0)。

.pac-man {
  position: absolute;
  height: 60px;
  left: 0;
  top: 0;
  width: 60px;
}

updated pen