Calculation of the X, Y values of the transformational origin
<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 a way to calculate the transform-orgin X and Y values using the height and width of the object so that it rotates smoothly around one point, like waving an arm and shoulder.
In this case, I figured it was 81% and 46% through trial and error, but would like a simpler method.
thank
+3
source to share
1 answer