如何中心這個旋轉圖像（CSS動畫）

Question

我CodePen：http://codepen.io/leongaban/pen/wJAip

橙色齒輪是80×80，所以是白色的@標誌。

我添加了藍色的背景，所以你可以看到，由於某種原因，橙色齒輪看起來是分拆中心。

這裏是在Photoshop一字排開圖像：

HTML：

<div id="spinner"> 
    <div id="logo"> 
     <img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/> 
    </div> 
    <div id="gear" class="spin"> 
     <img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/> 
    </div> 
</div> 

CSS：

div#spinner { 
    position: absolute; 
    width: 80px; 
    height: 80px; 
    top: 35%; 
    left: 50%; 
    margin-left: -40px; 
    background: blue; 
} 

div#logo { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 80px;  
    height: 80px; 
    z-index: 3; 
} 

#logo img { 
    width: 100%; 
    height:100%; 
} 

div#gear { 
    position: absolute; 
    top: 0; 
    left: 0; 
    -webkit-transition: -webkit-transform 0.1s; 
    transition: transform 0.1s; 
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 
    transform: translateX(100%) translateY(-100%) rotate(45deg); 
    pointer-events: none; 
    z-index: 2; 
} 

.spin { 
    -webkit-animation: rotation 4.5s linear infinite; 
    animation: rotation 4.5s linear infinite; 
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg); 
    transform: translateX(100%) translateY(-100%) rotate(45deg); 
} 

Answer 1

使在#gear DIV塊等級的圖像。

#gear img{ 
    display:block; 
} 

http://codepen.io/anon/pen/rjfbl

Answer 2

無論出於何種原因，你的傳動元件越來越高度84px。這會導致它脫離軸。作爲一個實驗，您可能希望嘗試將高度設置爲#gear，並將其設置爲非常小（例如0px）並觀看;就好像它圍繞邊界框頂部的一個點旋轉一樣。

將你的裝備的寬度和高度顯式設置爲80x或100％，它會起作用。

div#gear { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    -webkit-transition: -webkit-transform 0.1s; 
    transition: transform 0.1s; 
    pointer-events: none; 
    z-index: 2; 
} 

Codepen（您與兩個添加的行，寬度和高度）：http://codepen.io/anon/pen/LuBvI