2015-10-02 132 views
0

所以我只是玩一個小小的JavaScript遊戲,建立一個pacman遊戲。你可以在這裏看到:http://codepen.io/acha5066/pen/rOyaPWCSS旋轉。旋轉div但保持完全相同的座標?

雖然我遇到了旋轉問題。你可以看到你是否玩過它,當pac旋轉時,他指向一個不同的方向,但他的座標也會改變一點。應該發生什麼事情,他應該旋轉,但在完全相同的位置。

我正在使用transform-origin: 'center center';,但我也試過transform-origin: 'top left';但是,既不給我我想要的。

+1

給您的容器寬度http://codepen.io/anon/pen/LpWpBp – Kaiido

回答

1

你必須給你的容器一個寬度或transform-origin: x不會有任何效果(0的中心仍然是0)。

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

updated pen

1

這是因爲你的pacman類沒有寬度和高度。如果您添加

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

它會工作。