transform-zoom-out不会使内容保持居中

Question

我目前正在处理我正在处理的网页的问题。我有一个很好的网格，上面有不同的内容块。

当我点击一个块时，我打开一个模态，然后网格缩小。我正在将这个类添加到我的网格中以缩小：

#container.overlay-open {
 transform: translate3d(0,0,-1500px);
}

容器本身的css：

#container {
.transition(0.7s all);
transform-style: preserve-3d;
position: absolute;
left: 0px;
right: 0px;
top: 100px;
bottom: 100px;
}  

这适用于第一行。然而，当我向下滚动一点并单击另一个块时，网格容器会一直缩小，但容器会稍微移动到屏幕顶部，它不再居中（图3）。

如何在缩放后保持内容居中（图2）？

Answer 1

您可以使用＆＃34; scale＆＃34;而不是使用＆＃34; translate3d＆＃34;。我相信这应该达到你想要的效果。

#container.overlay-open {
    transform: scale(0.5);
}