Calculating the transform-origin X,Y values
animation, css, geometry, math, transform
Solution
Aaah! Figured it out in px. Easy really!
The width of the arm is 201px and the height is 74px. The pivot point i needed is 34px from the top and 34px from the right.
X starts from the left. Y starts from the top so... X = 201-34 = 167 Y = 34
-webkit-transform-origin:167px 34px;
Problem
``` <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 would like to know if there is way to calculate the transform-orgin X and Y values using the height and width of an object so that it pivots around a single point smoothly like an arm and shoulder waving. In this case i figured it out to be 81% and 46% through trial and error but would like a simpler method. Thanks