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

您可以使用“缩放”，而不是使用“translate3d”。我相信应该可以达到你想要的效果。

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