Javascript 放大a<；部门>；带有CSS转换的容器

在project/中，我在缩放时替换每个元素（通过移动它们并更改它们的字体大小）。它起作用了

现在我想测试CSS的nice

transform:scale（…）功能

在下面的测试中，我想：


当用户单击时，缩放整个

当用户按住CTRL键并单击时缩小

问题是，无论我们单击何处，缩放都是以相同的方式进行的。
如何缩放已单击的点？（就像它已经在我当前的实现中起作用一样）


var container=document.getElementById（“container”），wrapper=document.getElementById（“wrapper”）；
var-zoom=1；
wrapper.onclick=函数（e）{
zoom*=e.ctrlKey？1/1.2:1.2；
container.style.transform=“缩放”（+zoom+”）；
}

#包装{位置：绝对；顶部：0px；左侧：0px；宽度：1000px；高度：600px；背景色：#AAAABB；}
#容器{位置：绝对；顶部：100px；左侧：100px；宽度：600px；高度：400px；背景色：灰色；过渡持续时间：0.3s；}
#文本{位置：绝对；顶部：100px；左侧：100px；字体大小：30px；}


试验
您还需要将当前的缩放应用于屏幕坐标：


var container=document.getElementById（“container”），wrapper=document.getElementById（“wrapper”），marker=document.getElementById（“marker”）；
var-zoom=1；
wrapper.onclick=函数（e）{
var x=e.clientX-container.getBoundingClientRect（）.left；
var y=e.clientY-container.getBoundingClientRect（）.top；
console.log（x，y）
x/=缩放；
y/=缩放；
zoom*=e.ctrlKey？1/1.2:1.2；
container.style.transform=“缩放”（+zoom+”）；
container.style.transformOrigin=x+“px”+y+“px”；
marker.style.top=（y-2）+'px'；
marker.style.left=（x-2）+'px'；
}

#包装{位置：绝对；顶部：0px；左侧：0px；宽度：1000px；高度：600px；背景色：#AAAABB；}
#容器{位置：绝对；顶部：100px；左侧：100px；宽度：600px；高度：400px；背景色：灰色；过渡持续时间：0.3s；}
#文本{位置：绝对；顶部：100px；左侧：100px；字体大小：30px；}
#标记{位置：绝对；宽度：4px；高度：4px；背景色：红色；}


试验
这里有一个有效的片段：你可以在鹦鹉的眼睛里点击，然后在其他地方点击：它将始终以点击点为缩放中心进行缩放



var current={x:0，y:0，zoom:1}，c=document.getElementById（'container'）；
window.onclick=函数（e）{
wx=current.x+e.clientX/current.zoom；
wy=current.y+e.clientY/current.zoom；
var coef=e.ctrlKey？0.5:2；
current.zoom*=coef；
current.x=wx-e.clientX/current.zoom；
current.y=wy-e.clientY/current.zoom；
c、 style.transform='scale（'+current.zoom++'）translate（'+-current.x）+'px，'+-current.y）+'px'）；
};
html，正文{边距：0；填充：0；溢出：隐藏；最小高度：100%；}
#容器{位置：绝对；变换原点：0；}
#项目{位置：绝对；左侧：0px；顶部：0px；}
@vp\u arth如上所述，我已经尝试了
转换原点
（使用
e.clientX
，
e.clientY
），但它没有改变任何东西。您的
如前所述
在上次编辑之后：）仔细阅读上面的链接。它需要百分比。0表示左侧，100%表示右侧边缘。您只需将您的坐标重新连接到此过程。或尝试添加
px
postfixyes@vp_arth；）首先我忘了提到我曾经尝试过
转换origin
它几乎可以工作，但不是真的：第一次在“Test”的第一个“T”上缩放三四次。它起作用了。现在在“s”的中间进行缩放：“s”将进行缩放，但缩放时不会将“s”作为固定点（它应该是固定点！）：将移动“s”。。。并且将不在光标下。