0

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

Community
  • 1
Gagan
  • 101
  • 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. – joriki Jul 10 '15 at 01:52
  • @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. – Gagan Jul 10 '15 at 03:48
  • 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? – joriki Jul 10 '15 at 04:21
  • 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. – Gagan Jul 10 '15 at 09:03
  • convention, not conversion – joriki Jul 10 '15 at 09:22
  • Oh yes! you pointed out correctly in your first comment itself, but I read it wrong in hurry. Thanks – Gagan Jul 10 '15 at 09:47

0 Answers0