如何将CSS缩放原点设置在页面顶部的中间？

Question

我目前正在尝试缩放整个首页（背景之外），因为它太大了。我目前在网站上的body元素中使用以下代码：

transform: scale(0.7);

但是似乎将缩放原点设置为页面的中心

我想将首页上的浮动框固定在屏幕顶部（似乎是顶部居中）。在添加转换之前，这些框将附加到页面的中心顶部。我想保持这种风格，但要保持缩放。现在，缩放将取消页面顶部的浮动框的铰链，在页面顶部和浮动框之间留出一些空白。我只想删除该空白区域，以使未缩放的框位于屏幕顶部。理想情况下，第一行框的顶部将触摸/开始于屏幕的顶部。

也许像“ top：0”之类的东西需要放在某个地方？

这里是指向我的网站的链接：https://www.thefloodplains.com/

Answer 1

尝试如下将body元素设置为transform-origin: top;

body {
    margin: 0;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    background: white;
    transform: scale(0.5);
    -moz-background-size: 100% 100%;
    background: url(OceanWater.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform-origin: top;
}