Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 scale transform and positioning

CSS3 scale transform and positioning

Problem

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!

Problem courtesy of: Adam Sheppard

Solution

It is simple with transform-origin.

For example: transform-origin: top left;

Demo

Solution courtesy of: bookcasey

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 scale transform and positioning

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×