CSS Referenzhandbuch

CSS @Regel(RULES)

CSS Eigenschaft大全

CSS3 perspective-origin Eigenschaft CSS Seite-break-inside Eigenschaft

CSS3 Verwendung und Beispiel der Eigenschaft perspective

Die CSS-Eigenschaft perspective definiert die Perspektive aller untergeordneten Elemente des Betrachtungsobjekts. Sie entscheidet in der Regel über die Entfernung zwischen der Ebene Z = 0 und dem Betrachter, um3d-Positionselement mit einem tiefen Gefühl. Jeder Z > 03Der D-Element wird größer, während jeder Z < 03Das D-Element wird kleiner.

Die folgende Tabelle enthält die Beschreibung und Versionshistorie der Verwendung dieses Attributes, sowie die Syntax seiner Verwendung in JavaScript-Skripten.

Standardwert：	none
Anwendbar auf：	verformbare Elemente
Vererbung：	keine
Animierbar:	ja.Bitte beziehen Sie sich auf Animationseigenschaft。
Version：	CSS3neue Funktion
JavaScript Syntax：	object.style.perspective=500

Perspective Syntax

Die Syntax dieses Attributes ist wie folgt：

perspective:　length　|　none　|　initial　|　inherit

Der folgende Beispiel zeigt, wie die perspective-Eigenschaft verwendet wird.

Beispiel

.container　{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px　solid　#e5a043;
　　　　background:　#fff2dd;
}
.transformed　{
　　　　-webkit-transform:　translate3d(25px,　25px,　50px);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　translate3d(25px,　25px,　50px);　
}

Testen Sie es heraus‹/›

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
length	Länge des Wertes der Tiefe des Perspektivs. Wenn es 0 oder negativ ist, wird keine Perspektivtransformation angewendet.
none	Keine Perspektivtransformation anwenden. Dies ist der Standardwert.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn angegeben, verwendet der verknüpfte Element sein Perspective-Wert des übergeordneten Elements.

Browserkompatibilität

Die Kompatibilität der perspective-Eigenschaft der Browser, die Zahlen in der folgenden Tabelle stellen die niedrigste Versionsnummer der Browser dar, die diese Eigenschaft unterstützen; alle gängigen Browser unterstützen diese Eigenschaft.

	Firefox 10+ ^-moz-，16 + Google Chrome 12+ ^-webkit-，36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-，23+

Weiterlesen

Bitte beziehen Sie sich auf die folgenden Tutorials：CSS3 3D-Transformation。

Verwandte Eigenschaften：perspective-origin，backface-visibility，transform，transform-origin，transform-style。

CSS3 perspective-origin Eigenschaft CSS Seite-break-inside Eigenschaft