perspective 3D透視簡介

2021-07-08 15:26:50 字數 759 閱讀 6053

perspective 屬性定義 3d 元素距檢視的距離,以畫素計。該屬性允許改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。所以要使元素有透視效果,需設定其父元素的perspective屬性。

當perspective:none/0;時,相當於沒有設perspective(length)。比如要建立乙個小立方體,長寬高都是200px。

如果perspective < 200px ,那就相當於站在盒子裡面看的結果,如果perspective 非常大那就是站在非常遠的地方看(立方體已經成了小正方形了)。

當元素沒有設定perspective(length)時,所有後代元素被壓縮在同乙個二維平面上,不存在景深的效果。如果設定perspective(length)後,將會看到三維的效果。預設的透視視角中心在容器(是perspective所在的元素,不是他的後代元素)的中點,也就是perspective-origin: 50% 50%。當然你也可以自己設定,比如:左上角-webkit-perspective-origin: 0px 0px;。

目前瀏覽器都不支援 perspective 屬性。chrome 和 safari 支援替代的 -webkit-perspective 屬性。

將平面圖形轉換為具有透視的3d圖形,該屬性只能使其子元素產生3d,不對自身節點產生影響。

這裡有詳細的解釋

變形和透視 perspective

前面介紹了css3 2d變形 transform 移動 縮放 旋轉 傾斜 有2d 也有3d,例如3d transform中有下面這三個方法 perspective 屬性定義 3d 元素距檢視的距離,以畫素計 一般取500px 該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 pers...

css 開門 透視perspective動畫效果

ie9及其以下版本完全不支援css 3d transforms技術,opera 12也不支援。具體支援資訊請檢視caniuse.com。css動畫是當前一種非常火爆的技術,我說的並不是一些簡單的顏色變換或長短屬性變換,我說的是3d變換技術 純css實現的翻滾旋轉立方體就是最典型的例子。網上能找到很多...

3D效果 perspective屬性

css3中的transform可以做2d操作,當然也有3d操作。3d效果的顯示在於父元素必須有乙個perspective屬性。例如 perspective屬性可以定義3d視覺的角度,可以使子元素顯示3d特效。perspectice視距,表示視點距離螢幕的長短,視點,用於模擬透視效果時人眼的位置 pe...