html缩放页面导致元素位置变动,javascript-从中心缩放后,将元素保持在原始位置...

所以我想知道如何计算从中心缩放的元素的转换CSS属性值(css：transform-origin：50％50％0).

HTML：

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;

标签：css3,css,html,javascript,jquery

来源： https://codeday.me/bug/20191029/1963803.html