I have read the questions related to my query this and this. Based on the answer I have calculated the scale, rotation and translation. Some mistake certainly I have done that's why I could not get the correct values. Here are my detailed steps:

  • Step 1: Initial div without tranformation

  • Step 2: Next I apply different transformations:

    transform:translate(250px, 250px) rotate(45deg) translate(-250px, -250px) translate(38px, 250px) rotate(20deg) translate(-38px, -250px) scale(.5)
  • Step 3: Now I calculate the transformation matrix for all above transformations and apply to the original div:

    transform: matrix(0.21130913087034978,0.45315389351832497,-0.45315389351832497,0.21130913087034978,310.61081520146786,-40.000898954115684)

and I get the same out put as in "step 2"

I am using transformatrix module to calculate the transformation matrix.

  • step 4: Finally I calculate the scale, rotation and translation based on the answer .

    transform: rotate(-25deg) scale(0.5) translate(310.611px,-40px)

And apply these transformations to the original div and it does not look alike the output of "step 2" or "step 3". I was expecting it would give me the combined transformations in scale, rotation and translation.

My requirement: Many transformations would be applied on the div by user and at the end I would allow to store the combined/final rotation, scale and translation to user.

Please let me know where am I doing wrong or is this not possible (to calculate the combined values).

  • $\begingroup$ Have you tried inverting the angle? I haven't looked into the details, but that seems like a natural candidate that might get messed up due to incompatible conventions. $\endgroup$ – joriki Jul 10 '15 at 1:52
  • $\begingroup$ @joriki inverting means 180 - finalRotation i.e in may case 180 -(-25)=205 that is also not correct it should be 65deg. What does incompatible conversion mean? Here are visuals with code snippet for better understanding my problem. $\endgroup$ – Gagan Jul 10 '15 at 3:48
  • $\begingroup$ Aha -- the $65^\circ$ is promising -- that's $-25^\circ+90^\circ$. So it's quite likely to be due to incompatible conventions -- perhaps one measuring angles with respect to the $x$ axis and one with respect to the $y$ axis? $\endgroup$ – joriki Jul 10 '15 at 4:21
  • $\begingroup$ Its matrix notation in the answer that I was following, is different than standard HTML convention. @joriki Now its solved, still I would like to know what is incompatible conversion. $\endgroup$ – Gagan Jul 10 '15 at 9:03
  • $\begingroup$ convention, not conversion $\endgroup$ – joriki Jul 10 '15 at 9:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.