javascript - CSS3 缩放变换和定位

Question

所以我正在做一个元素，我需要在调整窗口大小时缩放一个 div(及其包含的所有元素)。我的想法是使用 CSS3 缩放变换。但是，当我调整大小时，我发现 div 缩小到窗口的中间，而不是停留在我放置它的位置。

这是一个(非常)简单的例子，我希望当我的意思是:http://jsfiddle.net/hmY9q/3/ -- 我希望看到的是蓝色框与结果框的边框和红色框的底部齐平。

我在纠正问题时的第一个想法是计算我希望 div 所在的位置与它实际出现的位置之间的差异，并使用变换矩阵同时缩放和平移。虽然我无法让它正常工作，但它似乎是一个低效且不优雅的解决方案。

这是它的代码(显然不会让我在没有代码的情况下发布问题):

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 + ")");

注意:我正在用 haxe 编程并编译为 js，所以这就是代码有点不同的原因。 “容器”是一个 JQuery 对象，可以被视为一个对象。

那么，有人能想出一些神奇的 CSS 或 javascript 来简化这个吗？我是不是在服用疯狂的药丸并遗漏了一些非常愚蠢的东西？谢谢!

Answer 1

transform-origin. 很简单

例如:transform-origin: top left;

Demo