CSS3 perspective-origin 屬性

實例

設(shè)置一個3D元素的基數(shù)位置：

div
{
perspective:150;
perspective-origin: 10% 10%;
-webkit-perspective:150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */
}

嘗試一下 ?

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個瀏覽器版本號。

屬性          
perspective-origin 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-

屬性定義及使用說明

perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。

定義時的perspective -Origin屬性，它是一個元素的子元素，透視圖，而不是元素本身。

注意： 對于Chrome和Safari用戶：為了更好地理解perspective屬性!

對于 Chrome 和 Safari 用戶: 為了更好地理解perspective-Origin屬性，請查看查看實例.

默認(rèn)值： 50% 50%
繼承： no
版本： CSS3
JavaScript 語法： object.style.perspectiveOrigin="10% 10%"

語法

perspective-origin: x-axis y-axis;
值描述
x-axis

定義該視圖在 x 軸上的位置。默認(rèn)值：50%。

可能的值：

  • left
  • center
  • right
  • length
  • %
y-axis

定義該視圖在 y 軸上的位置。默認(rèn)值：50%。

可能的值：

  • top
  • center
  • bottom
  • length
  • %