旋轉一個精靈，它移動的地方？

我有一個4幀的精靈圖像。每一幀的寬度大約爲50px，因此整個圖像的寬度大約爲200px。它循環而不停在屏幕中間。旋轉一個精靈，它移動的地方？

我想向上旋轉圖像大約20度，但將它保持在屏幕中間。當我嘗試這樣做時，旋轉的中心看起來大約在100px（它使用200px精靈圖像）而不是25px（在每個單獨框架的中間）。因此，精靈圖像將在屏幕中間移動，但是當我應用transform: rotate(-20deg)時，它會向右跳躍大約75px。

精靈圖像位於一個框中，該框位於寬度爲50px的另一個框中。我正在將旋轉應用於該50px框。

我試過把-webkit-transform-origin放在transform: rotate(20deg)之前有幾個不同的值，但是它似乎對旋轉沒有任何影響。我也嘗試關閉精靈的動畫，但它仍然發生。有沒有人知道這個問題的解決辦法？

下面是HTML中的相關內容：CSS的

<div class="Box"> 
    <div class="TopDiv"> 
     <div class="MiddleDiv"> 
      <div class="BottomDiv"></div> 
     </div> 
    </div> 
</div>

相關位：

.Box{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: em(500px); 
    height: em(500px); 
    margin-left (em(-500px)/2); 
    margin-top (em(-500px)/2); 
    overflow-hidden; 
} 

.TopDiv{ 
    position:relative; 
    width: em(50px); 
    height: em(20px); 
    background-size: 50px 20px; 
} 

.MiddleDiv{ 
    position: relative; 
    width: em(50px); 
    height: em(20px); 
    overflow: hidden; 
} 
.BottomDiv{ 
    position: absolute; 
    width: em(200px); 
    height: em(20px); 
    background-image: url('mysprite.jpg'); 
    background-size: 200px 20px; 
    -webkit-animation playanimation 1s steps(4) infinite; 
}

然後我使用JavaScript來上的keydown應用此：

.rotate{ 
    transform: rotate(-20deg); 
}

來源

2014-04-03 eltb

相反，我嘗試添加代碼到的jsfiddle但它似乎沒有工作，被遺漏什麼嗎？ http://jsfiddle.net/EKc9k/ – aurbano

首先所有的，適當地添加引號給班級，例如

class="TopDiv" 
      ^^

其次，你的寬度值不正確，使用width:20px OR width:20em的width:em(20px)

來源

2014-04-03 14:30:36

旋轉一個精靈，它移動的地方？

回答

相關問題