CODEWITHSUNDEEP
javascriptcss
Adam Sheppard
Adam Sheppard

Reputation: 55

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.

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!

Upvotes: 1

Views: 2497

Answers (1)

bookcasey
bookcasey

Reputation: 40511

It is simple with transform-origin.

For example: transform-origin: top left;

Demo

Upvotes: 2

Related Questions