@-webkit-keyframes waveArm{ 0%,100% { -webkit-transform...">

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>

      

enter image description here

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


Ahh! Figured it out in px. It's really easy!

The shoulder width is 201px and the height is 74px. The pivot point I want is 34px on the top and 34px on the right.



X starts from the left. Y starts at the top, so ...
X = 201 - 34 = 167

Y = 34

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

+4


source







All Articles