计算变换原点 X,Y 值答案

【问题标题】：Calculating the transform-origin X,Y values计算变换原点 X,Y 值
【发布时间】：2012-04-21 00:28:18
【问题描述】：

<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%，但我想要一个更简单的方法。

谢谢

【问题讨论】：

我想我首先需要知道支点，对吧？在上面的例子中，它距顶部 34px，距右侧 34px。

标签： math animation css geometry transform

【解决方案1】：

啊啊！以px计算出来。真的很简单！

手臂的宽度是201px，高度是74px。我需要的轴心点是距顶部 34px 和距右侧 34px 的位置。

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

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

【讨论】：

如果你想保留百分比：167/201 *100 = 83%