Keep element in original position after scaling from center

css, html, javascript, jquery

Solution

Found the answer by my self (tested some calculations).

Just calculate like this (Javascript):

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

Problem

So i want to know how to calculate `translate` css property value for element that is scaled from center (css: `transform-origin: 50% 50% 0`). Here is my HTML and 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; } ``` The black box should be in same (left top) position as red box even when scale value is changed.

Original source