我目前正在处理的页面有问题。我有一个漂亮的网格,上面有不同的内容 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)?
最佳答案
您可以使用“scale”代替“translate3d”。相信应该能达到你想要的效果。
#container.overlay-open {
transform: scale(0.5);
}
关于css - transform-zoom-out 不会使内容居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26927570/