CSS/Eigenschaften/äußere Gestaltung/Transformationen/scale
Mit scale() und den anderen hier vorgestellten Funktionen können Sie ein Element in seiner Größe verändern. Die Funktionen sind dabei Werte der Eigenschaft transform. Die Größenänderung hat keinerlei Einfluss auf die Positionierung anderer Elemente.
Details: caniuse.com
Die Funktionen benötigen Zahlen als Argumente. Diese Zahlen sind die entsprechenden Streckungsfaktoren. Ein negativer Faktor führt zu einer Spiegelung des Elements.
Inhaltsverzeichnis
Funktionen[Bearbeiten]
Es gibt verschiedene Funktionen, die in Struktur und Syntax geringfügig abweichen:
scale()[Bearbeiten]
transform: scale() ist die zusammenfassende Eigenschaft von transform: scaleX() und transform: scaleY().
.bigger:hover aside {
-webkit-transform: scale(2); /* für ältere Android-Browser */
transform: scale(2);
}
.smaller:hover aside {
transform: scale(.5, .7);
}
.invisible:hover aside {
transform: scale(0, 5);
}
.mirrored:hover aside {
transform: scale(-1.5);
}
transform: scale() erwartet als Argument bis zu zwei Streckungsfaktoren. Der erste gibt die Größenänderung in horizontaler, der zweite die in vertikaler Richtung an.
Wird nur eine Zahl angegeben, so gilt dieser Streckungsfaktor für beide Richtungen.
scaleX()[Bearbeiten]
Mit transform: scaleX() können Sie eine Parallelstreckung entlang der Horizontalen erreichen.
.bigger:hover aside {
-webkit-transform: scaleX(2); /* für ältere Android-Browser */
-ms-transform: scaleX(2); /* für IE 9 */
transform: scaleX(2);
}
.smaller:hover aside {
transform: scaleX(.5);
}
.invisible:hover aside {
transform: scaleX(0);
}
.mirrored:hover aside {
transform: scaleX(-1.5);
}
transform: scaleX() benötigt als Argument einen Streckungsfaktor k.
Der Streckungsfaktor ist eine Zahl, das „Streckungszentrum“ (mathematisch korrekt die Fixpunktgerade) wird durch die Eigenschaft transform-origin festgelegt. Wird dazu keine Angabe gemacht, so ist die Fixpunktgerade die durch den Mittelpunkt des Elements verlaufende Vertikale. Streckungsfaktoren größer als Eins vergrößern (strecken) das Element, Faktoren zwischen Null und Eins stauchen es und negative Faktoren spiegeln das Element an der Fixpunktgeraden.
Der Vollständigkeit halber sei erwähnt, dass k = 1 das Element unverändert lässt, wohingegen k = 0 die Breite des Elements auf Null setzt.
Wie Sie an den Beispielen erkennen können, wird die ursprüngliche Größe der Elemente für den Dokumentfluss verwendet. Skalierte Objekte können so über Ränder oder in den Text hineinragen.
scaleY()[Bearbeiten]
Mit transform: scaleY() können Sie eine Parallelstreckung entlang der Vertikalen erreichen.
transform: scaleY() benötigt als Argument einen Streckungsfaktor k.
Der Streckungsfaktor ist eine Zahl, das „Streckungszentrum“ (mathematisch korrekt die Fixpunktgerade) wird durch die Eigenschaft transform-origin festgelegt. Wird dazu keine Angabe gemacht, so ist die Fixpunktgerade die durch den Mittelpunkt des Elements verlaufende Horizontale. Streckungsfaktoren größer als Eins vergrößern (strecken) das Element, Faktoren zwischen Null und Eins stauchen es und negative Faktoren spiegeln das Element an der Fixpunktgeraden.
Der Vollständigkeit halber sei erwähnt, dass k = 1 das Element unverändert lässt, wohingegen k = 0 die Höhe des Elements auf Null setzt.
scaleZ()[Bearbeiten]
Mit transform: scaleZ() können Sie eine räumliche Streckung entlang der Z-Achse erreichen.
.scalez {
background: black;
color: gold;
}
.scalez:hover {
transform: perspective(1000px) scaleZ(3) rotateX(45deg);
}
section hovern, erzielt die Funktion transform: scaleZ() eine räumliche Streckung. Sie können die Wirkung durch eine Änderung der perspective()-Funktion verstärken.Durch eine Animation der Texts können Sie einen Opening Crawl (siehe unten) wie in den Star Wars Filmen erreichen.
scale3d()[Bearbeiten]
The scale3d(x, y, z)-Funktion skaliert die Größe eines Elements im dreidimensionalen Raum.
Sie benötigt folgende Angaben:
x: eine Zahlenangabe des Streckungsfaktors auf der X-Achsey: eine Zahlenangabe des Streckungsfaktors auf der Y-Achsez: eine Zahlenangabe des Streckungsfaktors auf der Z-Achse
@keyframes skalierung {
0% { transform: scale3d(1, 1, 1); }
17% { transform: scale3d(1, 2, 1); }
33% { transform: scale3d(1, 2, 2); }
50% { transform: scale3d(2, 2, 2); }
67% { transform: scale3d(2, 2, 1); }
83% { transform: scale3d(2, 1, 1); }
100% { transform: scale3d(1, 1, 1); }
}
.cube {
animation: skalierung 5s infinite linear;
}
}
Anwendungsbeispiele[Bearbeiten]
Eine Polaroid-Bildergalerie[Bearbeiten]
In dieser Bildergalerie werden Bilder als kleinere Vorschauansichten angezeigt. Ein Berühren mit der Maus skaliert sie auf die Originalgröße. Zusätzlich erscheint die bisher durch overflow:hidden verborgene figcaption als Bildunterschrift.
#galerie figure {
background: #FFF;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
display: inline-block;
height: 15em;
margin: 0 0 1em 2em;
overflow: hidden;
padding: 0;
width: 15em;
transition: all 0.25s ease-in;
}
#galerie figure img {
width: 15em;
height: 15em;
}
#galerie figure:hover,
#galerie figure:focus {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
margin: -1em 0px 0 20px;
padding: 5px 5px 30px 5px;
width: 15em;
z-index: 2;
transform: scale(2);
}
#galerie figcaption {
color: #333;
font: cursive 10px/150%;
font-family: "Reenie Beanie", cursive;
position:relative;
text-align: center;
width: 15em;
}
Ein Schatten sorgt für einen räumlichen Effekt, der durch ein leichtes Kippen bei jedem 3. Bild nach links und jedem 5. Bild nach rechts verstärkt wird. Der Hintergrund besteht nicht aus einer Grafik, sondern einem Verlaufsmuster.
Texte und Buchstaben spiegeln[Bearbeiten]
Mit transform:scale() können Sie ebenfalls einzelne Wörter oder Buchstaben spiegeln:
.gespiegelt {
-webkit-transform: scale(-1, 1); /* für Safari, Android */
-ms-transform: scale(-1, 1); /* für IE9 */
transform: scale(-1, 1);
}
Alle Elemente der Klasse .gespiegelt werden entlang der x-Achse gespiegelt. Damit dies bei den inline-Elementen span funktioniert, müssen sie einen display:inline-block bekommen.
transform: scaleY()steuert die Parallelstreckung in vertikaler Richtung und wird in völliger Analogie zutransform: scaleX()verwendet.