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.

Funktionen

Es gibt verschiedene Funktionen, die in Struktur und Syntax geringfügig abweichen:

scale()

transform: scale() ist die zusammenfassende Eigenschaft von transform: scaleX() und transform: scaleY().

Beispiel ansehen …

.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);
}

ansehen …

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.

Beachten Sie: Der Elementfluss bleibt unverändert.

scaleX()

Mit transform: scaleX() können Sie eine Parallelstreckung entlang der Horizontalen erreichen.

Beispiel ansehen …

.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);	
}

ansehen …

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.

Beachten Sie: Der Elementfluss bleibt unverändert.
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()

Mit transform: scaleY() können Sie eine Parallelstreckung entlang der Vertikalen erreichen.

Beispiel ansehen …

Die Funktion transform: scaleY() steuert die Parallelstreckung in vertikaler Richtung und wird in völliger Analogie zu transform: scaleX() verwendet.

ansehen …

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.

Beachten Sie: Der Elementfluss bleibt unverändert.

scaleZ()

Mit transform: scaleZ() können Sie eine räumliche Streckung entlang der Z-Achse erreichen.

Beispiel ansehen …

.scalez {
  background: black;
  color: gold;
}

.scalez:hover {
  transform: perspective(1000px) scaleZ(3) rotateX(45deg);
}

Wenn Sie auf der schwarzen 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.

ansehen …

scale3d()

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-Achse
• y: eine Zahlenangabe des Streckungsfaktors auf der Y-Achse
• z: eine Zahlenangabe des Streckungsfaktors auf der Z-Achse

Beispiel ansehen …

@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;
}
}

Dieses Beispiel zeigt, wie ein Würfel nacheinander zu einem Quader gestreckt und anschließend wieder gestaucht wird.

ansehen …

Anwendungsbeispiele

Eine Polaroid-Bildergalerie

Beispiel ansehen …

.galerie figure { 
  background:#FFF;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  height:225px;  
  overflow: hidden; 
  width: 225px; 
  -webkit-transition: all 0.25s ease-in;   /* für Safari 5.1, Android 2.3 bis 4.3 */
  transition: all 0.25s ease-in;
}

.galerie figure:hover { 
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.8);
  height: 260px;
  margin: 0 15px 5px 10px; 
  padding: 5px 5px 15px 5px; 
  width:235px;
  z-index: 2; 
  -webkit-transform: scale(2);  /* für Safari, Android */
  -ms-transform: scale(2); /* für IE9 */	
  transform: scale(2);	
}

.galerie figure:nth-child(3n-2):hover {
  -webkit-transform: scale(2) rotate(-2.5deg);  /* für Safari, Android */
  -ms-transform: scale(2) rotate(-2.5deg);     /* für IE9 */
  transform: scale(2)  rotate(-2.5deg);
}

.galerie figure:nth-child(5n):hover {
  -webkit-transform: scale(2) rotate(2deg);
  -ms-transform: scale(2) rotate(2deg);	
  transform: scale(2)  rotate(2.5deg);	
}

ansehen …

In diesem Beispiel 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.

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

Mit transform:scale() können Sie ebenfalls einzelne Wörter oder Buchstaben spiegeln:

Beispiel ansehen …

.gespiegelt {
  -webkit-transform: scale(-1, 1);  /* für Safari, Android */
  -ms-transform: scale(-1, 1);      /* für IE9 */
  transform: scale(-1, 1);
}

ansehen …

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.