CSS3 scale transform and positioning
So I'm working on a project where I need to Scale a div (and all the elements it contains) as the window resizes. My idea is to use the CSS3 scale transform. However, as I resize I find that the div shrinks into the middle of the window rather than staying in the spot I positioned it in.
Here is a (really) simple example that I hope will illustrate when I mean: http://jsfiddle.net/hmY9q/3/ -- What I would like to see is the blue box flush with both the border of the result box and the bottom of the red box.
My first thought at rectifying the problem was to calculate the difference between the postion I would like the div to be at and the position it actually appears and use the transform matrix to both scale and translate at the same time. I wasn't able to get this to work properly though and it seems like an inefficient and otherwise inelegant solution.
Here's the code for that (won't let me post question without code apparently):
var yShift = (container.height() * scale) - container.height(); var xShift = (container.width() * scale) - container.width(); container.css(browserID + "transform", "matrix("+ scale + ",0,0," + scale + "," + -xShift + "," + -yShift + ")");
note: I'm programming in haxe and compiling to js, so that's why the code is a bit different. 'container' is a JQuery object and can be treated as one.
It is simple with
transform-origin: top left;
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here