Question

为了将元素完全翻译出来，我使用了transform: translate(0, -100%);。然而，它的孩子，如果你调整窗口的大小压缩它的高度足够远，将逐渐重新出现。我不知道为什么他们会这样做，我希望有人能说明发生这种情况的原因。这是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

你的cirecles有固定的高度（500px / 400px）。当#background的高度变得小于通过调整窗口大小的高度时，圆圈会垂直溢出#background。 translate移动100％指的是#background，因此您仍然可以看到在没有#background设置的情况下会溢出translate的圈子部分。

孩子们在CSS3转型中不会与父母一起翻译

1 个答案: