CSS3 perspective-origin 屬性


實例

設置一個3D元素的基數位置:

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


流覽器支持

表格中的數字表示支持該屬性的第一個流覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該首碼屬性的第一個流覽器版本號。

屬性
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屬性,請查看 查看實例.

默認值: 50% 50%
繼承: no
版本: CSS3
JavaScript 語法: object.style.perspectiveOrigin="10% 10%"


語法

perspective-origin: x-axis y-axis;

描述
x-axis

定義該視圖在 x 軸上的位置。默認值:50%。

可能的值:

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

定義該視圖在 y 軸上的位置。默認值:50%。

可能的值:

  • top
  • center
  • bottom
  • length
  • %