计算变换原点X,Y值

时间:2012-04-08 00:43:11

标签: math animation css3 geometry transform

<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>

enter image description here

我想知道是否有办法使用物体的高度和宽度计算变换角度X和Y值,以便它像手臂和肩膀一样平滑地绕一个点旋转。

在这种情况下,我通过反复试验得出81%和46%,但想要一种更简单的方法。

由于

1 个答案:

答案 0 :(得分:4)

啊哈!在px中计算出来。很容易!

手臂的宽度为201px,高度为74px。 我需要的枢轴点是从顶部34px和从右边34px。

X从左侧开始。 Y从顶部开始,所以...
X = 201-34 = 167
Y = 34

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