April 25th, 2013, 10:11 AM
CSS3 transform origin
I'm doing some css3 animations, by scaling. I have a div that has a width of 619 and height of 600. In the div, I have a couple of rectangles (and will have more) that are each 20 x 20px in width and height. The orgin for scaling these is top,right (0,0). I have a formula that calculates the scale amount according to the parent box width of 619. So, scaling this to the width is 619/20 = 30.95%. However, box position 2 needs a new transform origin in order to fill the parent box as well. it's x position is 22 and y position is 50 (although we don't care about this because we're simply scaling x). my question is, in order to fill the parent box, how would I figure out the new transform origin?