css - transform-zoom-out 不会使内容居中

Question

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

当我点击一个 block 时，我会打开一个模式，然后网格会缩小。我正在将此类添加到我的网格中以缩小:

#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;
}  

这对第一行非常有效。然而，当我向下滚动一点并单击另一个 block 时，网格容器不断缩小，但容器向屏幕顶部移动了一点，它不再居中(图 3)。

如何在缩放后保持内容居中(图 2)？

Answer 1

您可以使用“scale”代替“translate3d”。相信应该能达到你想要的效果。

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