Javascript CSS3尺度变换与定位

因此，我正在进行一个项目，在该项目中，我需要随着窗口大小的调整缩放一个div（及其包含的所有元素）。我的想法是使用CSS3比例变换。但是，当我调整大小时，我发现div收缩到窗口的中间，而不是停留在我定位它的位置

下面是一个（非常）简单的例子，我希望在我的意思是：--我希望看到的是蓝色框与结果框的边框和红色框的底部齐平

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

下面是代码（显然，我不会在没有代码的情况下发布问题）：

注意：我正在用haxe编程并编译成js，所以代码有点不同“容器”是一个JQuery对象，可以作为一个对象处理

那么，有没有人能想出一些神奇的CSS或javascript来简化这个过程？我是不是服用了疯狂的药丸，错过了一些真正愚蠢的事情？谢谢

这很简单

例如：

变换原点：左上角

太美了。我知道必须有一些简单的东西，谷歌只是让我失望。非常感谢。
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 + ")");