3 
<style type="text/css">

@-webkit-keyframes waveArm{
    0%,100% {
        -webkit-transform:rotate(0deg);
    }
    10%,30%,50%,70%,90% {
        -webkit-transform:rotate(90deg);
    }
    20%,40%,60%,80% {
        -webkit-transform:rotate(45deg);
        }
}

#arm {
    position:absolute;
    top:135px;
    left:135px;
    width:201px;
    height:74px;
    background:url(test-arm.png) 0 0 no-repeat;
    -webkit-animation: waveArm 3s 1s 1;
    -webkit-transform-origin:81% 46%;
}

</style>

<div id="arm"></div>

ここに画像の説明を入力してください

オブジェクトの高さと幅を使用して、変換元のX値とY値を計算し、腕や肩を振るように1点を中心にスムーズに回転する方法があるかどうかを知りたいです。

この場合、試行錯誤の結果、81％と46％であることがわかりましたが、もっと簡単な方法が必要です。

ありがとう

4

1 に答える 1

4

ああ！ピクセルでそれを理解しました。本当に簡単！

腕の幅は201px、高さは74pxです。必要なピボットポイントは、上から34ピクセル、右から34ピクセルです。

Xは左から始まります。Yは上から始まるので...
X= 201-34 = 167
Y = 34

-webkit-transform-origin：167px 34px;

于 2012-04-09T20:31:17.900 に答える