Kinder übersetzen nicht zusammen mit Eltern in CSS3-Transformation

Um ein Element vollständig außer Sicht zu übersetzen, habe ich transform: translate(0, -100%); verwendet. Seine Kinder jedoch, wenn Sie die Größe des Fensters verkleinern, das seine Höhe weit genug komprimiert, werden allmählich wieder erscheinen. Ich habe keine Ahnung, warum sie das tun, und ich möchte, dass jemand den Grund dafür erklärt. Hier ist the fiddle.Kinder übersetzen nicht zusammen mit Eltern in CSS3-Transformation

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

Quelle

2016-03-25 Willege

Sie haben für Ihre cirecles (500px/400px) Höhen fixiert. Wenn die Höhe #background kleiner wird als bei der Größenänderung des Fensters, würden die Kreise vertikal überlaufen #background. Die translate Bewegung um 100% bezieht sich auf #background, so dass Sie immer noch den Teil der Kreise sehen, der #background ohne die translate Einstellung überlaufen würde.

Quelle

2016-03-25 23:46:53 Johannes

Vielen Dank. Aber ich habe schon versucht mit 'overflow: hidden' und es hat nicht funktioniert. – Willege

'overflow: hidden' versteckt nur Sachen * innerhalb *' Hintergrunds, d. H. Zeug, das die tatsächlichen Grenzen von 'background überfliegt. Die bewegten Kreise sind teilweise * innerhalb * dieser Grenzen ... – Johannes

Kinder übersetzen nicht zusammen mit Eltern in CSS3-Transformation

Antwort

Verwandte Themen