CSS Referenzhandbuch

CSS @Regel (RULES)

CSS Eigenschaftsliste

CSS position Eigenschaft CSS3 perspective Eigenschaft

CSS3 perspective-origin 属性使用方法及示例

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。定义时的perspective-Origin属性，它是一个元素的子元素，透视图，而不是元素本身。

下表为此属性的用法说明和版本历史记录，以及该属性在javascript脚本中的使用语法。

默认值：	50P%
适用于：	可变形元素
继承：	没有
可动画制作：	是。请参考动画属性.
版本：	CSS3的新功能
JavaScript语法：	object.style.perspectiveOrigin="20%"

Perspective-origin的使用语法

该属性的语法如下：

perspective-origin:　[　x-position　y-position　]　|　initial　|　inherit

Hinweis:如果只为perspective-origin属性指定了一个值，则第二个值假定为中心，等于50％的值。

下面的示例演示了如何使用perspective-origin-Eigenschaft.

Beispiel

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　perspective-origin:　20%　top;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　rotate3d(0,　1,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　rotate3d(0,　1,　0,　60deg);　
}

Testen Sie es heraus‹/›

Hinweis:Wenn mindestens einer der beiden Werte kein Schlüsselwort ist, stellt der erste Wert die horizontale Position (oder Verschiebung) des Perspektivpunkts der Perspektive dar, der zweite Wert die vertikale Position (oder Verschiebung) des Perspektivpunkts der Perspektive.

Eigenschaftswert

Die folgende Tabelle beschreibt die Werte dieser Eigenschaft.

Wert	Beschreibung
x-axis	Stellt die horizontale Position (oder Verschiebung) des Perspektivpunkts der Perspektive dar. Es kann einen der folgenden Werte haben: percentage -Definiert den Abstand relativ zur Breite des Elements. length -Definiert den Abstand der verwendeten Längenwerte. left -entspricht 0% oder Nullbreite. center -entspricht der Breite des Kästchens50% oder die Hälfte. right -entspricht100% oder die gesamte Breite des Kästchens.
y-axis	Stellt die vertikale Position (oder Verschiebung) des Perspektivpunkts der Perspektive dar. Es kann einen der folgenden Werte haben: percentage -Definiert den Abstand relativ zur Höhe des Elements. length -Definiert den Abstand der verwendeten Längenwerte. top -entspricht 0% oder Nullhöhe. center -entspricht der Höhe des Kästchens50% oder die Hälfte. bottom -entspricht100% oder die gesamte Höhe des Kästchens.
initial	Setzen Sie diesen Wert auf seinen Standardwert.
inherit	Wenn spezifiziert, verwendet der verknüpfte Element sein Perspective des übergeordneten Elements.-Werte der origin-Eigenschaft.

Browserkompatibilität

perspective-Kompatibilität der origin-Eigenschaft des Browsers, 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+

Weitere Lesetipps

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

CSS position Eigenschaft CSS3 perspective Eigenschaft