English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Referenzhandbuch

CSS @Regeln (RULES)

Vollständiges Verzeichnis der CSS-Eigenschaften

CSS3 Verwendung und Beispiel der transform-Eigenschaft

Die transform-CSS-Eigenschaft wird auf das Element angewendet2D oder3D-Umwandlung. Diese Eigenschaft ermöglicht es Ihnen, Elemente zu drehen, zu skalieren, zu bewegen, zu neigen, zu verschieben, zu drehen und zu skalieren, etc. in zwei- oder dreidimensionalen Räumen.

Die folgende Tabelle enthält Anwendungsbeschreibungen und Versionshistorien dieser Eigenschaft sowie ihre Verwendung in JavaScript-Skripten.

Standardwert:none
Geeignet für:deformierbare Elemente
Vererbung:keine
Animierbar:ist.Bitte beziehen Sie sich auf Animationsattribute.
Version: CSS3neue Funktion
JavaScript-Syntax:object.style.transform="rotate(7deg)

Syntax der Verwendung von transform

Die Syntax dieses Attributes ist wie folgt:

transform:　[　transform-function　]　1　or more values | none | initial | inherit

Der folgende Beispiel zeigt, wie die Eigenschaft transform verwendet wird.

img　{
　　　　-webkit-transform:　translate(200px,　50px);　　/*　Chrome,　Safari,　Opera　*/
　　　　　　　-moz-transform:　translate(200px,　50px);　　/*　Firefox　*/
　　　　　　　　-ms-transform:　translate(200px,　50px);　　/*　IE　9　*/
　　　　　　　　　　　　transform:　translate(200px,　50px);　　　　　　
}
Testen Sie heraus‹/›

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

WertBeschreibung
translate(tx,ty)Bewege das Element entlang der X und Y-Achse um die angegebene Menge.
translate3d(tx,ty,tz)Bewege das Element entlang der X, Y und Z-Achse um die angegebene Menge.
translateX(tx)Bewege das Element entlang der X-Achse um die angegebene Menge.
translateY(ty)Bewege das Element entlang der Y-Achse um die angegebene Menge.
translateZ(tz)Bewege das Element entlang der Z-Achse um die angegebene Menge.
rotate(a)basierend auf transform-Die origin-Eigenschaft definiert, wie ein Element um seinen Ursprung um einen bestimmten Winkel gedreht wird.
rotate3d(x,y,z, a)Dreht das Element um den in dem letzten Parameter angegebenen Winkel um die Richtungsvector [x, y, z].3Elemente im Raum.
rotateX(a)Dreht das Element um den angegebenen Winkel um die X-Achse.
rotateY(a)Dreht das Element um den angegebenen Winkel um die Y-Achse.
rotateZ(a)Dreht das Element um den angegebenen Winkel um die Z-Achse.
scale(sx,sy)Skaliert die Breite und Höhe des Elements um die angegebene Anzahl nach oben oder unten.1,1) ungültig.
scale3d(sx,sy,sz)Skaliert das Element entlang der X-, Y- und Z-Achse um die angegebene Anzahl.3d(1,1,1) ungültig.
scaleX(sx)Skaliert das Element entlang der X-Achse.
scaleY(sy)Skaliert das Element entlang der Y-Achse.
scaleZ(sz)Skaliert das Element entlang der Z-Achse.
skew(ax,ay)Stellt den Neigungswinkel des Elements entlang der X- und Y-Achse fest.
skewX(ax)Stellt den Neigungswinkel des Elements entlang der X-Achse fest.
skewY(ay)Stellt den Neigungswinkel des Elements entlang der Y-Achse fest.
matrix(n,n,n,n,n,n)In Form der Transformationsmatrix mit sechs Werten spezifiziert2D-Transformation.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)mit16Werte4×4In Form der Transformationsmatrix spezifiziert3D-Transformation.
perspective(length)Definition3Perspektive der D-Transformationselemente. Normalerweise erscheinen Elemente, deren Wert dieser Funktion zunimmt, weiter vom Betrachter entfernt.
noneStellen Sie fest, dass keine Transformation angewendet wird.
initialSetzen Sie diesen Wert auf seinen Standardwert.
inheritWenn angegeben, wird der zugehörige Element der Eigenschaftswert von transform des übergeordneten Elements verwendet.

Browserkompatibilität

Kompatibilität der transform-Eigenschaft der Browser; die Zahlen in der folgenden Tabelle geben die niedrigste Versionsnummer der Browser an, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.

  • Firefox (2D）3.5 +,3D）10+ -moz-,16 +

  • Chrome (2D）4 +,3D）12+ -webkit-,36 +

  • Internet Explorer (2D）9 -ms-,10+

  • Apple Safari (2D）3.2 +,3D）4+ -webkit-

  • Opera (2D）10.5+ -o 　 -,
    (2D）（3D）15+ 　 -webkit-,23+

Weiterführende Lektüre

Bitte beziehen Sie sich auf die folgenden Anleitungen:CSS3 2D-Transformation,CSS3 3D-Transformation

Zusammenhängende Eigenschaften:backface-visibility,perspective,perspective-origin,transform-origin,transform-style.

CSS3 transform-origin EigenschaftCSS top Eigenschaft