Question

我有一个4帧的精灵图像。每帧的宽度约为50像素，因此整个图像的宽度约为200像素。它不会在屏幕中间停止循环。

我想将图像向上旋转大约20度，但要将其保持在屏幕中间。当我尝试这样做时，旋转的中心似乎是大约100px in（它使用200px精灵图像）而不是25px in（每个单独帧的中间）。因此精灵图像将在屏幕中间移动，但是当我应用transform: rotate(-20deg)时，它会向右和向上跳跃75px。

精灵图像位于一个框中，该框位于另一个宽度为50像素的框中。我正在将旋转应用到那个50px的盒子。

我尝试在-webkit-transform-origin之前添加transform: rotate(20deg)几个不同的值，但它似乎对旋转没有任何影响。我也试过关闭精灵的动画，但它仍然会发生。有谁知道解决这个问题？

以下是HTML的相关内容：

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

css的相关位：

.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);
 }

Answer 1

首先，将引文正确添加到类中，例如

class="TopDiv"
            ^^

其次，您的宽度值不正确，使用width:20px或width:20em INSTEAD width:em(20px)

旋转一个精灵，它移动到位？

1 个答案: