Transformed Kinder enthalten seltsame Mutter Breite

ich einen einfachen HTML-Markup habe:Transformed Kinder enthalten seltsame Mutter Breite

<div class="parent"> 
    <div class="child"> 
    </div> 
</div>

Das Kind Element durch transform: translate(-100%); aus dem Ansichtsfenster, aber das Mutterbreite bewegt sich nicht mit dem Kind Elemente bewegt wird

Das ist mein vereinfachte CSS:

.parent { 
    position: fixed; 
    top: 20%; 
    left: 0; 
} 

.parent .child { 
    height: 300px; 
    width: 500px; 
    background: orange; 
    transform: translate(-100%); 
    -webkit-transform: translate(-100%); 
    -moz-transform: translate(-100%); 
    -o-transform: translate(-100%); 
}

Werfen Sie einen Blick:

Quelle

2016-05-13 susanloek

Beim Transformieren und Element sind die Eltern nicht betroffen. So sollen CSS-Transformationen funktionieren. Von Using CSS transforms:

durch den Raum koordinieren zu modifizieren, verwandelt CSS die Form und Position des betroffenen Inhalts ändern, ohne das normale Dokument fließen zu stören.

Quelle

2016-05-13 07:37:26 insertusernamehere

Wenn ich mit 'links: -100%;' statt verwandeln, ich habe das gleiche Problem bekam ... – susanloek

@susanloek Wenn Sie die Transformation nicht anwenden, Sie sehen, wie der Behälter gefüllt mit den Kindelementen (die "Slide-Out-Elemente") und hat eine endgültige berechnete Breite und Höhe von "nxm px". Dann verschiebst du die Kinder mithilfe von transform nach links. Wie bereits erwähnt "* CSS-Transformationen ändern die Form und Position des betroffenen Inhalts, ohne den normalen Dokumentenfluss zu stören *". Der übergeordnete Container behält also seine berechnete Größe bei, unabhängig davon, wie Sie die untergeordneten Elemente transformieren. – insertusernamehere

Transformed Kinder enthalten seltsame Mutter Breite

Antwort

Verwandte Themen