<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值,以便它像手臂和肩膀一样平滑地绕一个点旋转。
在这种情况下,我通过反复试验得出81%和46%,但想要一种更简单的方法。
由于
答案 0 :(得分:4)
啊哈!在px中计算出来。很容易!
手臂的宽度为201px,高度为74px。 我需要的枢轴点是从顶部34px和从右边34px。
X从左侧开始。 Y从顶部开始,所以...
X = 201-34 = 167
Y = 34
-webkit-transform-origin:167px 34px;