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