計算變換原點X，Y值

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

我想知道是否有辦法使用對象的高度和寬度來計算變換淵源考X和Y值，使其平穩地繞着一個點樞轉，就像手臂和肩膀揮舞着一樣。

在這種情況下，我通過反覆試驗發現它是81％和46％，但想要一個更簡單的方法。

感謝

來源

2012-04-08 Ribbo

我想我首先需要知道樞軸點的權利？在上面的情況下，從頂部是34px，從右邊是34px。 – Ribbo 2012-04-08 00:46:45

啊哈！在px中找出它。真的很簡單！

手臂的寬度爲201px，高度爲74px。我需要的樞軸點是從頂部34px，從右邊34px。

X從左邊開始。將Y從頂部開始，從而...
X = 201-34 = 167
Y = 34

-webkit-變換原點：167px 34像素;

來源

2012-04-09 20:31:17 Ribbo

如果你想保持百分比： 167/201 * 100 = 83％ – Ribbo 2012-04-09 20:41:30

計算變換原點X，Y值

回答

相關問題