CSS perspective 屬性
更多“自己嘗試”的例子見下文。
定義和用法
perspective
屬性用於為 3D 定位的元素新增透視效果。
perspective
屬性定義了元素與使用者的距離。因此,較小的值會比較大的值產生更強的 3D 效果。
當為元素定義 perspective
屬性時,是該元素的子元素獲得透視檢視,而不是元素本身。
提示: 還可以檢視 perspective-origin
屬性,該屬性定義了使用者觀察 3D 物件的哪個位置。
為了更好地理解 perspective 屬性,請檢視演示。
預設值 | none |
---|---|
繼承 | no |
可動畫 | 是的。 閱讀關於 animatable 的資訊 試一試 |
版本 | CSS3 |
JavaScript 語法 | object.style.perspective="50px" 試一試 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
perspective | 36 | 10 | 16 | 9 | 23 |
CSS 語法
perspective: length|none;
屬性值
屬性值 | 描述 | 演示 |
---|---|---|
length | 元素距離檢視有多遠 | 演示 ❯ |
none | 預設值。與 0 相同。未設定透視 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
相關頁面
CSS 教程: CSS 3D 變換
HTML DOM 參考: perspective 屬性