Javascript 计算变换原点以将图像缩放到视口的中间

我试图在javascript

transform origin

属性中计算绝对定位元素，以便它们在悬停时填充整个视口

我试图用x除以窗口宽度，y除以窗口高度来计算这个属性，其中x是从左视口边缘到元素中心的距离，y是从vieport顶部到元素中心的距离。不幸的是，元素并没有以这种方式完全居中，也没有像我希望的那样填充整个屏幕，尽管它的大小适合填充屏幕：/

如何正确计算

变换原点的枢轴位置，以实现我的目标

这里有一个演示：


let blocks=document.querySelectorAll（“a.block”）；
控制台日志（块）；
Array.prototype.slice.call（块）.forEach（（块）=>{
控制台日志（块）；
设blockRect=block.getBoundingClientRect（）；
设originX=（blockRect.left+blockRect.width/2）/window.innerWidth*100，
originY=（blockRect.top+blockRect.height/2）/window.innerHeight*100；
block.style.transformOrigin=`${originX}%${originY}%`；
});
.block{
位置：绝对位置；
左：5%；
排名前10%；
宽度：10%；
身高：10%；
背景：红色；
-webkit转换：转换1s；
转变：转变1s；
}
.街区2号{
左：87%；
最高：26%；
}
.block:悬停{
-webkit转换：scale3d（10,10,1）；
变换：scale3d（10,10,1）；
}
使用JavaScript执行此操作有什么特殊原因吗？如果您只是想要动画，可以使用纯css，只需将元素的位置和尺寸设置为覆盖整个页面，并使用transition将其动画化：

.block{
位置：绝对位置；
左：5%；
右：85%；
排名前10%；
底部：80%；
宽度：10%；
身高：10%；
背景：红色；
-webkit转换：所有1；
过渡：所有1；
}
.街区2号{
左：87%；
最高：26%；
}
.block:悬停{
排名：0；
左：0；
底部：0；
右：0；
宽度：100%；
身高：100%；
}
使用JavaScript执行此操作有什么特殊原因吗？如果您只是想要动画，可以使用纯css，只需将元素的位置和尺寸设置为覆盖整个页面，并使用transition将其动画化：

.block{
位置：绝对位置；
左：5%；
右：85%；
排名前10%；
底部：80%；
宽度：10%；
身高：10%；
背景：红色；
-webkit转换：所有1；
过渡：所有1；
}
.街区2号{
左：87%；
最高：26%；
}
.block:悬停{
排名：0；
左：0；
底部：0；
右：0；
宽度：100%；
身高：100%；
}
我更新了几何变换的知识，找到了正确的数学公式

transform-origin-x = scale * x / (scale-1)
transform-origin-y = scale * y / (scale-1)

其中，x和y是距离[left for x，top for y]边的距离，转换为与元素宽度相同的单位

要将以像素为单位的距离转换为百分比，可以：

Percentage x distance = left[px] / window.innerWidth[px] * 100
Percentage y distance = top[px] / window.innerHeight[px] * 100


let blocks=document.querySelectorAll（“a.block”）；
Array.prototype.slice.call（块）.forEach（（块）=>{
设blockRect=block.getBoundingClientRect（）；
设originX=（10*（blockRect.left/window.innerWidth*100））/9，
originY=（10*（blockRect.top/window.innerHeight*100））/9；
block.style.transformOrigin=`${originX}%${originY}%`；
});
.block{
位置：绝对位置；
左：5%；
底部：10%；
宽度：10%；
身高：10%；
背景：红色；
-webkit转换：转换1s；
转变：转变1s；
}
.街区2号{
左：87%；
底部：自动；
最高：17%；
}
.block:悬停{
-webkit转换：scale3d（10,10,1）；
变换：scale3d（10,10,1）；
}
我更新了几何变换的知识，找到了正确的数学公式

transform-origin-x = scale * x / (scale-1)
transform-origin-y = scale * y / (scale-1)

其中，x和y是距离[left for x，top for y]边的距离，转换为与元素宽度相同的单位

要将以像素为单位的距离转换为百分比，可以：

Percentage x distance = left[px] / window.innerWidth[px] * 100
Percentage y distance = top[px] / window.innerHeight[px] * 100


let blocks=document.querySelectorAll（“a.block”）；
Array.prototype.slice.call（块）.forEach（（块）=>{
设blockRect=block.getBoundingClientRect（）；
设originX=（10*（blockRect.left/window.innerWidth*100））/9，
originY=（10*（blockRect.top/window.innerHeight*100））/9；
block.style.transformOrigin=`${originX}%${originY}%`；
});
.block{
位置：绝对位置；
左：5%；
底部：10%；
宽度：10%；
身高：10%；
背景：红色；
-webkit转换：转换1s；
转变：转变1s；
}
.街区2号{
左：87%；
底部：自动；
最高：17%；
}
.block:悬停{
-webkit转换：scale3d（10,10,1）；
变换：scale3d（10,10,1）；
}

我必须使用3d变换，因为在这种情况下我需要非常平滑的过渡。所有元素都是用js随机排列的，所以我不能使用纯css，因为我不知道元素在运行中的位置。此外，您的解决方案不适用于连接到底边的元素：实际上存在一个bug。您必须在初始.block定义中设置top、left、right和bottom值。我已将答案改为正确的版本。这里有一个陷阱：当放置这些盒子时，你必须计算正确的百分比，以便顶部+高度+底部=100%，但这应该很容易。由于我们使用的是内置的浏览器功能，所以它也应该运行平稳。但是你必须办理登机手续，这很顺利。谢谢你的帮助。我找到了正确的数学公式，用我的方式来做。我将测试这两种解决方案的性能，并选择最佳答案；）我必须使用3d变换，因为在这种情况下我需要非常平滑的过渡。所有元素都是用js随机排列的，所以我不能使用纯css，因为我不知道元素在运行中的位置。此外，您的解决方案不适用于连接到底边的元素：实际上存在一个bug。您必须在初始.block定义中设置top、left、right和bottom值。我有成龙