Javascript 从中心缩放后,将图元保持在原始位置
所以我想知道如何计算从中心缩放的元素的Javascript 从中心缩放后,将图元保持在原始位置,javascript,jquery,html,css,Javascript,Jquery,Html,Css,所以我想知道如何计算从中心缩放的元素的translatecss属性值(css:transformorigin:50%50) 这是我的HTML和CSS(FIDDLE:) HTML: 即使刻度值发生变化,黑框也应与红框处于相同(左上)位置。我自己找到了答案(测试了一些计算结果) 只需这样计算(Javascript): <div id="holder"> <div id="dot"></div> <div id="box"></di
translate
css属性值(css:transformorigin:50%50
)
这是我的HTML和CSS(FIDDLE:)
HTML:
即使刻度值发生变化,黑框也应与红框处于相同(左上)位置。我自己找到了答案(测试了一些计算结果) 只需这样计算(Javascript):
<div id="holder">
<div id="dot"></div>
<div id="box"></div>
</div>
#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;
}
var pad_x = ((elem_width * scale) - elem_width) / 2;
var pad_y = ((elem_height * scale) - elem_height) / 2;