从中心缩放后保持元素在原始位置

Question

我想知道如何计算从中心缩放的元素的translate CSS属性值（CSS：transform-origin：50％50％0）。

这是我的HTML和CSS（FIDDLE： http://jsfiddle.net/rPNyM/）

HTML：

<div id="holder">
    <div id="dot"></div>  
  <div id="box"></div>
</div>

CSS：

#holder {
    position: absolute;
    width: 500px;
    height: 500px;
    background: #226699;

}

#dot {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 5px;
  height: 5px;
  background: #ff0000;
  z-index: 20;  
}

#box {
   position: absolute;
   left: 100px;
   top: 100px;
   width: 100px;
   height: 100px; 
   background: #000; 
   transform: translate(-25px, -25px) scale(0.2,0.2);
   transform-origin: 50% 50% 0;      
   -moz-transform: translate(-25px, -25px) scale(0.2,0.2);
   -moz-transform-origin: 50% 50% 0;     
}

黑色盒子应该与红色盒子在同一位置（左上角），即使缩放值发生变化。

- Hardy

Answer 1

我自己找到了答案（测试了一些计算）。

只需要按照以下方式进行计算（Javascript）：

var pad_x = ((elem_width * scale) - elem_width) / 2;
var pad_y = ((elem_height * scale) - elem_height) / 2;

- Hardy