您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“css中perspective屬性和perspective()函數(shù)有什么區(qū)別”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css中perspective屬性和perspective()函數(shù)有什么區(qū)別”吧!
透視屬性perspective
用于激活元素上的三維空間,以便其子元素可以定位在該空間中。
它允許您通過使 z 軸上較高的元素(靠近觀察者)顯得更大,而遠(yuǎn)離的元素顯得更小,從而為場景添加深度感。
在不指定透視的情況下,使用三維變換函數(shù)變換的元素將看起來是平面和二維的。
透視屬性perspective
與 CSS 變換 transforms 結(jié)合使用。 它需要一個長度值或關(guān)鍵字 none。 將此屬性與 none 以外的任何值一起使用可建立堆疊上下文。 它還建立了一個包含塊(有點(diǎn)類似于 position:relative),就像 transform 屬性所做的那樣。
默認(rèn)情況下,3D 空間的消失點(diǎn)(vanishing point)位于中心。 (它可以使用透視原點(diǎn)屬性 perspective-origin進(jìn)行更改。)
官方語法
聲明:
perspective: none | <length>
初始值:none
適用于:transformable elements
動畫: 可以,作為長度
值(Values)
沒有應(yīng)用透視,因此沒有觸發(fā)三維空間。
指定觀察者和 z=0 平面之間的假定距離。它用于計(jì)算透視矩陣,使之將透視變換應(yīng)用于元素及其內(nèi)容。如果設(shè)置為零,則不應(yīng)用透視。不允許使用負(fù)值。有關(guān)可能值的列表,請參閱 <length> 條目。
例子
下面設(shè)置一個元素的透視圖,該元素的子元素在由透視屬性觸發(fā)的三維空間中轉(zhuǎn)換:
.container { perspective: 1800px; } .container .child { float: left; margin: 50px; transform: translateZ(-50px) rotateY(45deg); }
在線 Demo
可以在 3D 形狀(例如立方體)上最好地展示元素的透視效果。
在這個演示中,存在三個相同的立方體,都具有相同的變換。他們每個都有不同的視角集。嘗試更改透視的值以查看場景深度如何變化。
透視值越高,效果越弱,透視值越低,效果越強(qiáng)。
當(dāng)你有一個元素想要在 3D 空間中轉(zhuǎn)換時(shí),你可以使用它的父元素的透視屬性 perspective
激活該空間,或者使用轉(zhuǎn)換元素本身的透視函數(shù) perspective()
。 那么這兩種方式有什么區(qū)別呢?
透視屬性 perspective
和透視函數(shù) perspective()
都用于通過使 z 軸上較高(靠近觀察者)的元素顯得更大,使遠(yuǎn)離的元素顯得更小來賦予元素深度。值越小,z-pane離觀察者越近,效果越令人印象深刻;值越高,元素離屏幕越遠(yuǎn),效果越微妙。
當(dāng)您使用透視函數(shù) perspective()
將透視應(yīng)用于元素時(shí)(有關(guān)其工作原理的詳細(xì)信息,請參閱變換屬性條目 transform),您僅在該元素上激活了三維空間。 在對單個元素應(yīng)用三維變換時(shí),perspective()
表示法很方便。但是當(dāng)你在一個容器中有多個轉(zhuǎn)換的元素時(shí),如果每個元素都使用透視函數(shù) perspective()
設(shè)置了一個透視圖,元素不會按預(yù)期排列。這是因?yàn)樗鼈兠總€都有自己的三維空間,因此也有自己的消失點(diǎn)。為了避免這種情況并允許元素對齊,它們應(yīng)該共享相同的空間。通過使用父容器上的透視屬性 perspective
,創(chuàng)建一個由其所有子元素共享的三維空間,這些子元素都將使用 3 維變換進(jìn)行變換。
css的選擇器可以分為三大類,即id選擇器、class選擇器、標(biāo)簽選擇器。它們之間可以有多種組合,有后代選擇器、子選擇器、偽類選擇器、通用選擇器、群組選擇器等等
到此,相信大家對“css中perspective屬性和perspective()函數(shù)有什么區(qū)別”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。