例
設置3D元素的基地位置:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
試一試» 定義和用法
的透視原點屬性定義,其中一個三維元件是根據在X和Y軸。 此屬性允許您更改3D元素的底部位置。
當定義一個元素的透視原點屬性,它是位於所述子元素,而不是元素本身。
Note:此屬性必須與使用的角度屬性,而只影響3D轉換的元素!
為了更好地理解透視origin屬性, 查看演示 。
默認值: | 50% 50% |
---|---|
遺傳: | no |
動畫: | yes. Read about animatable Try it |
版: | CSS3 |
JavaScript語法: | object .style.perspectiveOrigin="10px 50%" Try it |
瀏覽器支持
在表中的數字規定,完全支持該屬性的第一個瀏覽器版本。
其次是-webkit-號碼或-moz-指定用一個前綴工作的第一個版本。
屬性 | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- | 10.0 | 16.0 10.0 -moz- | 9 4.0.3 -webkit- | 23.0 15.0 -webkit- |
CSS語法
perspective-origin:x-axis y-axis|initial|inherit;
屬性值
屬性值 | 描述 |
---|---|
x-axis | 定義該視圖被放置在X軸 可能的值:
默認值:50% |
y-axis | 定義該視圖被放置在Y軸 可能的值:
默認值:50% |
初始 | 將此屬性設置為默認值。 閱讀關於初始 |
繼承 | 繼承其父元素此屬性。 閱讀關於繼承 |
相關頁面
CSS教程: CSS 3D變換
HTML DOM參考: perspectiveOrigin property