CODEWITHSUNDEEP
csscss-transforms
user5902649
user5902649

Reputation:

Children won't translate along with parent in CSS3 transformation

In order to translate an element completely out of view, I used transform: translate(0, -100%);. Its children however, if you resize the window compressing its height far enough, will gradually reappear. I have no clue why they do this, and I'd like someone to shed light on the reason why this happens. Here's 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;
}

Upvotes: 0

Views: 75

Answers (1)

Johannes
Johannes

Reputation: 67798

you have fixed heights for your cirecles (500px / 400px). When #background's height becomes less than that by resizing the window, the circles would overflow #background vertically. The translatemovement by 100% refers to #background, so you still see the part of the circles that would overflow #background without the translate setting.

Upvotes: 0

Related Questions