CSS transform scale

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.

.jade {
	width:100%;
	height:300px;
	background: url("img.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.