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.
So, can anyone out there think of some magic CSS or javascript that would simplify this? Am I on crazy pills and missing something really dumb? Thanks!
It is simple with
transform-origin.For example:
transform-origin: top left;Demo