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

为了将一个元素完全转换到视图之外，我使用了transform: translate(0, -100%);。但是，如果调整窗口的大小并将其高度压缩到足够远，它的子对象将逐渐重新出现。我不知道他们为什么这么做，我希望有人能解释为什么会发生这种事。这是小提琴。

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

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

相关内容

最新更新

热门标签：