CSS transform translate

CSS transform translate

CSS transform kann das Elemente nach rechts/links oder nach unten/oben verschieben – entweder mit absoluten oder relativen Werten.

In einem responsiven Design bevorzugen wir meist relative Angaben, damit sich die Transformation an kleine und große ViewPorts anpasst.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Der Ursprung bzw. Ausgangspunkt der Transformation

Jedes HTML-Element hat ein Koordinatensystem mit dem Ursprung oben links am Punkt (0,0). Ein transformiertes Objekt hat sein eigenes lokales Koordinatensystem und weiß nichts über das umfassende Element, in dem es liegt.

Das transformierte Elemente hat keine Ahnung, wie breit oder hoch sein umfassender Container ist, es kennt nur seine eigenen Maße. Ist der Container 100px, das transformierte Element 30px breit, dann bringt transform: translateX(100%) das Element nur um 30px voran, nicht aber um 100px.

transform: translate(100%)

Wenn die Grenzen für eine Transformation durch das umfassende Element festgelegt werden soll – zum Beispiel um ein Element über die verfügbare Breite zu verschieben – reicht es nicht, das Element selber zu animieren bzw. transformieren.

Ein transformiertes Element kennt nur sein eigenes Koordinatensystem und transform(translate: 100%) bezieht sich nur auf die Breite des Elements. Eine Alternative ist das Verschieben des Elements mittels margin, eine weitere Alternative nutzt ein zusätzliches Element als »Wrapper«.

<div class="parent">
	<div class="yellow-box"></div>
</div>
.parent {
	position: relative;
}
.yellow-box {
	position: absolute;
    width: 50px;
    background-color:yellow;
    animation: slide 4s alternate infinite;
}

@keyframes slide {
	from {margin-left: calc(0% - 0px)}
	to { margin-left: calc(100% - 50px)}
}

Der grüne Streifen für das zusätzliche Wrapper-Element zeigt nur die Breite und das Verhalten des zusätzlichen Elements: Es ist so breit wie das umfassende Element und bewegt sich um 100% seiner Breite.

<div class="parent">
	<div class="wrapper">
		<div class="red-box"></div>
	</div>
</div>
.wrapper {
    position: absolute;
    width: 100%;
    height: 110px;
    border-bottom: solid 2px green;
    box-sizing: border-box;
    animation: run 4s alternate infinite;
}
#child {
    position: absolute;
    width: 50px;
    height: 100px;
    background-color: red;
}

@keyframes run {
	to {transform: translateX(calc(100% - 50px))}
}