Javascript web：如何放大网格项目并使项目集中在视口中

所以我有一个网格，我想放大一个网格项

我在用什么<代码>变换：缩放（）以缩放网格容器，以及

元素。滚动视图（）

以将网格项移动到视口的中心

问题是什么

css变换：

scale（）

聚焦于元素的中心。 这将导致scale（）产生的缩放效果导航到栅格的右侧，因为它是栅格容器的中心，我希望缩放栅格项目，使其仅聚焦于视口的中心。 我有一个网格，它有许多项，并且比视口大，因此当我执行

scale（）

时，视口将移动到网格容器的中心，而不是缩放到当前视口中心

我目前的工作：

如何测试：

取消注释JS面板上的行

44

，该行被注释掉，唯一发生的事情是导航到单击的项目，但没有放大，此行使用

matrix（）

将

scale（）

和

translate（）

应用在一起，但它将视口移动到错误的位置，我认为传递给翻译的值可能是错误的，但我已经尝试了几天，决定寻求帮助

---

只需在

上设置一个
变换：比例（X）
。所选的
项似乎可以实现以下功能：

。已选定{
转换：比例（1.7）；
位置：相对位置；
z指数：1；
}

下面是我使用的简化Javascript：

bookclick上的函数（事件）{
event.stopPropagation（）；
取消选择（）；
event.target.scrollIntoView({
行为：“平滑”，
块：“中心”，
内联：“中心”
});
$（event.target）.addClass（'selected'）；
}
函数取消选择（）{
$（'.books\uuu item'）。removeClass（'选定'）
}
$（'.books'）。在（'click'，'.books\u项目：未（.selected'）上，在bookclick上）；
$（'.books'）。打开（'单击'，'.select'，取消选择）；

< >更新.< /P>计算元素相对于被缩放元素的整体尺寸的位置，并在要缩放的元素的中间设置元素的“<代码>转换原点< /代码>（使用<代码> %>代码>）。你还想翻译它，这样被放大的元素就会出现在屏幕的中央。你介意在我附加到问题的代码笔链接中试试吗？我不太明白你的意思mean@AndreiGheorghiu或者至少告诉我更多细节，getBoundingClientRect（）是获取相对元素位置的工具？//您看过代码了吗？缩放整个库既令人困惑（UX方面），又很复杂（代码方面；因为您使用的是
scrollIntoView（）
，它是实验性的，似乎没有回调参数）。我添加了一个答案，可以简单地缩放所选项目。谢谢！我非常感谢您的帮助，但我真的很愿意在那里实现缩放效果，并将继续我的旅程，直到那里问题是
transform
实际上不会更改DOM中的项。它只是在别处/以不同的方式呈现它。我相信
sIV
会滚动到元素在DOM中的实际位置，而不是父元素上的
scale（）。但是，方法是将父对象的
tranform origin
设置在滚动子对象的中心。应该使用，但我不确定它们在
scrollIntoView（）之前和之后返回什么。