Math 计算变换原点X、Y值 @-webkit关键帧waveArm{ 0%,100% { -webkit变换：旋转（0度）； } 10%,30%,50%,70%,90% { -webkit变换：旋转（90度）； } 20%,40%,60%,80% { -webkit变换：旋转（45度）； } } #手臂{ 位置：绝对位置； 顶部：135px； 左：135px； 宽度：201px； 高度：74px； 背景：url（test arm.png）0 0无重复； -webkit动画：waveArm 3s 1s 1； -webkit转换来源：81%46%； }

我想知道是否有方法使用对象的高度和宽度来计算变换原点的X和Y值，以便它像手臂和肩膀挥动一样平滑地围绕单个点旋转

在这个例子中，我通过反复试验得出了81%和46%，但我想要一个更简单的方法

---

谢谢

啊！在px中找到了答案。真的很容易

手臂的宽度为201px，高度为74px。 我需要的轴心点是从顶部算起的34px和从右侧算起的34px

X从左边开始。Y从顶部开始，所以…
X=201-34=167
Y=34

---

-webkit转换源：167px 34px

我想我首先需要知道轴心点，对吗？在上面的例子中，从顶部算起是34px，从右侧算起是34px。如果你想保持百分比：167/201*100=83%

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