CSS perspective 屬性

定義和用法

perspective 屬性定義 3D 元素距視圖的距離，以像素計。此屬性允許您更改查看 3D 元素的視角。

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

注釋：perspective 屬性只影響 3D 轉換元素。

提示：請與 perspective-origin 屬性一同使用該屬性，這樣您就能夠改變 3D 元素的底部位置。

另請參閱：

CSS3 教程：CSS3 3D 轉換

HTML DOM 參考手冊：perspective 屬性

實例

設置元素被查看位置的視圖：

div
{
perspective: 500;
}

親自試一試

CSS 語法

perspective: number|none;

屬性值

值 描述
number 元素距離視圖的距離，以像素計。
none 默認值。與 0 相同。不設置透視。

技術細節

默認值： none
繼承性： yes
版本： CSS3
JavaScript 語法： object.style.perspective=500

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit- 或 -moz- 的數字表示使用前綴的首個版本。

Chrome IE / Edge Firefox Safari Opera
36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0.3 -webkit-		 23.0
15.0 -webkit-