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

Answer 2

这是因为你的pacman类没有宽度和高度。如果您添加

.pac-man { 
    width: 50px; 
    height: 60px; 
} 

它会工作。