javascript - 计算变换原点以将图像缩放到视口(viewport)中间

Question

我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。

我尝试通过 x 除以窗口宽度和 y 除以窗口高度来计算此属性，其中 x 是从左视口(viewport)边缘到元素中心的距离，y 是视口(viewport)顶部与元素中心之间的距离。不幸的是，元素并没有以这种方式完美居中，并且没有像我想要的那样填满整个屏幕，尽管它的大小适合填满屏幕:/

如何正确计算 transform-origin 的枢轴位置以实现我想要的？

这里有一个演示:

let blocks = document.querySelectorAll("a.block");
console.log(blocks);

Array.prototype.slice.call(blocks).forEach((block) => {
	console.log(block);
  let blockRect = block.getBoundingClientRect();
	
  let originX = (blockRect.left + blockRect.width /2) / window.innerWidth * 100,
  	originY = (blockRect.top + blockRect.height /2) / window.innerHeight * 100;
	block.style.transformOrigin = `${originX}% ${originY}%`;
});

.block{
  position: absolute;
  left: 5%;
  top: 10%;
  width: 10%;
  height: 10%;
  background: red;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}
  
.block.second{
  left: 87%;
  top: 26%;
}
.block:hover{
  -webkit-transform: scale3d(10,10,1);
  transform: scale3d(10,10,1);
}

 <a href="#" class="block"></a>
 <a href="#" class="block second"></a>

Answer 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(blocks).forEach((block) => {

  let blockRect = block.getBoundingClientRect();
	
	let originX = (10 * (blockRect.left/window.innerWidth * 100)) / 9,
  	originY =  (10 * (blockRect.top/window.innerHeight * 100)) / 9;
  

	block.style.transformOrigin = `${originX}% ${originY}%`;
});

.block{
  position: absolute;
  left: 5%;
  bottom: 10%;
  width: 10%;
  height: 10%;
  background: red;
  -webkit-transition: transform 1s;
  transition: transform 1s;

}

.block.second{
  left: 87%;
  bottom: auto;
  top: 17%;
}

.block:hover{
  -webkit-transform: scale3d(10,10,1);
  transform: scale3d(10,10,1);
}

<a href="#" class="block"></a>
 <a href="#" class="block second"></a>