CSS transform scale

CSS transform scale

CSS transform scale verkleinert und vergrößert Elemente mit absoluten oder relativen Werten. Wenn nicht anderes angegeben ist, gehen Vergrößern / Verkleinern vom Mittelpunkt des Elements aus.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

width / height animieren

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.

Per Voreinstellung ist der Ursprung der Transformation die Mitte des Elements: transform-origin: 50% 50%. Damit das Element in diesem Beispiel aber auf Linie bleibt, verlegt CSS den Ursprung der Animation auf transform-origin: bottom left;

.ballo {
	transition: all 1s ease;
	transform-origin: bottom left;
}

.grow {
	transform: scale(1.5) // auf 150%;
}

transform: scale in Prozentangaben

Der Einsatz von Prozentwerten für Transformationen, gleich ob translate oder scale, bezieht sich immer auf das Element selbst, nicht auf den umfassenden Block oder Container.

In ein Bild hineinzoomen, wenn es in den ViewPort (den sichtbaren Ausschnitt des Browserfensters) kommt.

CSS Transition und Transform Scale beim Scrollen
.jade {
	width:100%;
	height:300px;
	background: url('img/herbs-1360.webp') no-repeat;
	background-size: cover;
	background-position: center center;
	transition: transform 5s ease;
	transform: scale(100%);
}

.jade.image-scaling {
	transform: scale(180%);
}

Ausgelöst wird die Transformation durch Javascript mit einem Intersection Observer.