Question

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

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

如何正确计算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

您是否有任何特殊原因要使用JavaScript执行此操作？如果您只想要动画，可以通过简单地设置元素的位置和尺寸来覆盖整个页面，并使用转换来很好地为其设置动画，从而使用纯css：

.block{
  position: absolute;
  left: 5%;
  right: 85%;
  top: 10%;
  bottom: 80%;
  width: 10%;
  height: 10%;
  background: red;
  -webkit-transition: all 1s;
  transition: all 1s;
}

.block.second{
  left: 87%;
  top: 26%;
}
.block:hover{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

Answer 2

我更新了几何变换的知识，并找到了正确的数学公式。

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

其中x和y距[左边为x，顶面为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>

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

2 个答案: