在 CSS3 转换中，子项不会与父项一起翻译

Question

为了将元素完全翻译出视野，我使用了transform: translate(0, -100%);。但是，如果您调整 window 的大小并充分压缩其高度，它的子项将逐渐重新出现。我不知道他们为什么这样做，我希望有人能阐明发生这种情况的原因。这里是 the fiddle.

HTML

<body>
    <div id="background">
         <div id="circle1"></div>
         <div id="circle2"></div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#background {
    background-color: red;
    height: 100%;
    width: 100%;
    position: fixed;
    transform: translate(0, -100%);
}

#circle1 {
    background-color: yellow;
    height: 500px;
    width: 500px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: fixed;
    border-radius: 50%;
    z-index: 0;
}

#circle2 {
    background-color: aqua;
    height: 400px;
    width: 400px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    position: fixed;
    border-radius: 50%;
    z-index: 1;
}

Answer 1

你的圆圈有固定的高度 (500px / 400px)。当 #background 的高度变得小于通过调整 window 的高度时，圆圈将垂直溢出 #background。 translate100% 的移动指的是 #background，因此您仍然会看到在没有 translate 设置的情况下会溢出 #background 的圆圈部分。

在 CSS3 转换中，子项不会与父项一起翻译

Children won't translate along with parent in CSS3 transformation

css

css-transforms