所以我想知道如何计算从中心缩放的元素的 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;
}
即使更改比例值,黑框也应与红框处于相同(左上)位置。
最佳答案
我自己找到了答案(测试了一些计算)。
像这样计算(Javascript):
var pad_x = ((elem_width * scale) - elem_width) / 2;
var pad_y = ((elem_height * scale) - elem_height) / 2;
关于javascript - 从中心缩放后将元素保持在原始位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21500964/