Javascript CSS从一个特定的点开始缩放，而该点可能会随之改变？

我正在尝试构建一个应用程序，您可以使用鼠标滚轮将一点放大到一个点，然后再进一步放大到另一个点

换言之，缩放的“原点”可以沿途改变

看看这个例子：

var相=1；
var box1=document.getElementById（“box1”）；
var box2=document.getElementById（“box2”）；
box1.style.transformOrigin=“0”；
box2.style.transformOrigin=“0”；
var宽度=100；
var高度=100；
函数变换（originX、originY、translateX、translateY、scale）{
transformElement（1，框1，originX，originY，translateX，translateY，scale）；
transformElement（2，框2，originX，originY，translateX，translateY，scale）；
}
功能转换元件(
方法,，
元素，
originX，
原创的，
translateX，
特兰西，
规模
) {
element.style.transition=“变换1s线性”；
如果（方法===1）{
element.style.transform=`translate（${originX}px，${originY}px）translate（${translateX}px，${translateY}px）scale（${scale}）translate（-${originX}px，${originY}px）`；
}else if（方法===2）{
element.style.transformOrigin=`${originX}px${originY}px`；
element.style.transform=`translate（${translateX}px，${translateY}px）scale（${scale}）`；
}
var pointElement=document.createElement（“div”）；
pointElement.classList.add（“点”）；
pointElement.style.transform=`translate（${originX}px，${originY-
2*标度}px）`；
元素。appendChild（pointElement）；
}
函数重置（）{
重置元素（框1）；
重置元素（框2）；
}
函数重置元素（元素）{
while（element.childrence.length>0）{
element.removeChild（element.children[0]）；
}
element.style.transform=“”；
element.style.transition=“”；
void元素.clientWidth；
}
功能阶段1（）{
变换（宽度*0.75，高度/2,0,0,1.5）；
}
功能阶段2（）{
变换（宽度*0.25，高度/2,0,0,2）；
}
功能阶段3（）{
变换（宽度/2，高度，0，0，2.5）；
}
功能阶段4（）{
变换（宽度/2,0,0,0,3）；
}
常数相位=[复位，相位1，相位2，相位3，相位4]；
setInterval（（）=>phases[phase++%phases.length]（），1500）
*{
框大小：边框框；
}
身体{
背景色：黑色；
}
.集装箱{
位置：相对位置；
利润率：60像素；
背景颜色：浅灰色；
宽度：200px；
高度：200px；
}
.点{
宽度：2倍；
高度：2倍；
背景色：白色；
}
.盒子{
位置：绝对位置；
最高：25%；
左：25%；
变换原点：0；
背景色：青色；
不透明度：0.8；
宽度：100px；
高度：100px；
}
.大纲{
背景色：透明；
边框：1px纯黑；
}
我认为你最好依靠选项2。您可以将转换应用于
变换原点
，并将延迟添加到
变换
，以便首先更改原点，然后执行变换：

transform 1s linear 0.5s, transform-origin 0.5s

完整代码：


var相=1；
var box2=document.getElementById（“box2”）；
box2.style.transformOrigin=“0”；
var宽度=100；
var高度=100；
函数变换（originX、originY、translateX、translateY、scale）{
transformElement（2，框2，originX，originY，translateX，translateY，scale）；
}
功能转换元件(
方法,，
元素，
originX，
原创的，
translateX，
特兰西，
规模
) {
element.style.transition=“变换1s线性0.5s，变换原点0.5s”；
element.style.transformOrigin=`${originX}px${originY}px`；
element.style.transform=`translate（${translateX}px，${translateY}px）scale（${scale}）`；
var pointElement=document.createElement（“div”）；
pointElement.classList.add（“点”）；
pointElement.style.transform=`translate（${originX}px，${originY-
2*标度}px）`；
元素。appendChild（pointElement）；
}
函数重置（）{
重置元素（框2）；
}
函数重置元素（元素）{
while（element.childrence.length>0）{
element.removeChild（element.children[0]）；
}
element.style.transform=“”；
element.style.transition=“”；
void元素.clientWidth；
}
功能阶段1（）{
变换（宽度*0.75，高度/2,0,0,1.5）；
}
功能阶段2（）{
变换（宽度*0.25，高度/2,0,0,2）；
}
功能阶段3（）{
变换（宽度/2，高度，0，0，2.5）；
}
功能阶段4（）{
变换（宽度/2,0,0,0,3）；
}
常数相位=[复位，相位1，相位2，相位3，相位4]；
setInterval（（）=>phases[phase++%phases.length]（），1500）
*{
框大小：边框框；
}
身体{
背景色：黑色；
}
.集装箱{
位置：相对位置；
利润率：50像素；
背景颜色：浅灰色；
宽度：200px；
高度：200px；
}
.点{
宽度：2倍；
高度：2倍；
背景色：白色；
}
.盒子{
位置：绝对位置；
最高：25%；
左：25%；
变换原点：0；
背景色：青色；
不透明度：0.8；
宽度：100px；
高度：100px；
}
.大纲{
背景色：透明；
边框：1px纯黑；
}

这是继这一部分之后的第二部分：是的：D需要你更多的帮助！主人说了！不幸的是，对于我正在开发的产品来说，先更改原产地是不可接受的。@MathiasLykkegaardLorenzen在这种情况下，您可以保留这个想法，尝试使用延迟和计时功能。例如，您可以同时更改它们，但要使变换生效，并使原点和eas out变得容易。。类似这样的内容：谢谢，不幸的是，当压缩缩放（在我的实际应用程序中也支持）时，在部分放大内容后更改来源时，这看起来会很有趣。我真的相信我们必须让选项1以某种方式起作用。你觉得怎么样？@MathiasLykkegaardLorenzen选项1不容易处理，因为我们如何结合翻译和缩放的复杂性。我试着玩它，但并不容易，因为所有的属性都在一个内transform@MathiasLykkegaa