변환 - 원점 X를 계산 Y는

Question

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

I 오브젝트의 높이와 폭을 이용하여 변환 - orgin는 X 및 Y 값을 계산하는 방법이 있는지 알고 싶은 값 있도록 팔과 어깨가 물결처럼 부드럽게 한 지점을 중심으로 선회합니다.

이 경우에는 시행 착오를 통해 81 %와 46 %로 계산했지만 간단한 방법을 원합니다.

감사

Answer 1

아악! 그것을 px로 나타 냈습니다. 정말 쉽지!

팔의 폭은 201px이고 높이는 74px입니다. 필요한 피벗 포인트는 상단에서 34px, 우측에서 34px입니다.

X는 왼쪽부터 시작합니다. Y는 .. 그래서 상부로부터 시작
X = 201-34 = 167
Y = 34

-webkit-출처 변환 : 167px 34px 단계;