css中perspective屬性和perspective()函數有什么區別

本篇內容主要講解“css中perspective屬性和perspective()函數有什么區別”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“css中perspective屬性和perspective()函數有什么區別”吧!

perspective

透視屬性perspective 用于激活元素上的三維空間，以便其子元素可以定位在該空間中。

它允許您通過使 z 軸上較高的元素（靠近觀察者）顯得更大，而遠離的元素顯得更小，從而為場景添加深度感。

在不指定透視的情況下，使用三維變換函數變換的元素將看起來是平面和二維的。

透視屬性perspective 與 CSS 變換 transforms 結合使用。 它需要一個長度值或關鍵字 none。 將此屬性與 none 以外的任何值一起使用可建立堆疊上下文。 它還建立了一個包含塊（有點類似于 position:relative），就像 transform 屬性所做的那樣。

默認情況下，3D 空間的消失點（vanishing point）位于中心。 （它可以使用透視原點屬性 perspective-origin進行更改。）

官方語法

• 聲明：

perspective: none | <length>

• 初始值：none

• 適用于：transformable elements

• 動畫： 可以，作為長度

值（Values）

none

沒有應用透視，因此沒有觸發三維空間。

<length>

指定觀察者和 z=0 平面之間的假定距離。它用于計算透視矩陣，使之將透視變換應用于元素及其內容。如果設置為零，則不應用透視。不允許使用負值。有關可能值的列表，請參閱 <length> 條目。

例子

下面設置一個元素的透視圖，該元素的子元素在由透視屬性觸發的三維空間中轉換：

.container {
    perspective: 1800px;
}

.container .child {
    float: left;
    margin: 50px;
    transform: translateZ(-50px) rotateY(45deg);
}

在線 Demo

可以在 3D 形狀（例如立方體）上最好地展示元素的透視效果。

在這個演示中，存在三個相同的立方體，都具有相同的變換。他們每個都有不同的視角集。嘗試更改透視的值以查看場景深度如何變化。

透視值越高，效果越弱，透視值越低，效果越強。

perspective vs perspective()

當你有一個元素想要在 3D 空間中轉換時，你可以使用它的父元素的透視屬性 perspective 激活該空間，或者使用轉換元素本身的透視函數 perspective()。 那么這兩種方式有什么區別呢？

透視屬性 perspective 和透視函數 perspective() 都用于通過使 z 軸上較高（靠近觀察者）的元素顯得更大，使遠離的元素顯得更小來賦予元素深度。值越小，z-pane離觀察者越近，效果越令人印象深刻；值越高，元素離屏幕越遠，效果越微妙。

當您使用透視函數 perspective() 將透視應用于元素時（有關其工作原理的詳細信息，請參閱變換屬性條目 transform），您僅在該元素上激活了三維空間。 在對單個元素應用三維變換時，perspective() 表示法很方便。但是當你在一個容器中有多個轉換的元素時，如果每個元素都使用透視函數 perspective() 設置了一個透視圖，元素不會按預期排列。這是因為它們每個都有自己的三維空間，因此也有自己的消失點。為了避免這種情況并允許元素對齊，它們應該共享相同的空間。通過使用父容器上的透視屬性 perspective，創建一個由其所有子元素共享的三維空間，這些子元素都將使用 3 維變換進行變換。

css的選擇器有哪些

css的選擇器可以分為三大類，即id選擇器、class選擇器、標簽選擇器。它們之間可以有多種組合，有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等

到此，相信大家對“css中perspective屬性和perspective()函數有什么區別”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！