CSS3特性實(shí)例分析

本文小編為大家詳細(xì)介紹“CSS3特性實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS3特性實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

我們來看下對比效果：

可以看到，我對兩個(gè)紅色的div在hover的時(shí)候分別設(shè)置了

平移100px和同時(shí)縮放到原來的1/4，兩個(gè)div的設(shè)置順序不一要，直接導(dǎo)致了最終的結(jié)果的巨大差異。

下面來劃重點(diǎn)：transform執(zhí)行順序?。?！

transform 后面如果有多個(gè)屬性值的話，那么后設(shè)置的屬性要先執(zhí)行

也就是說第一個(gè)紅色的div先縮小到原來的1/4,然后再平移100px，得到最終的效果。

第二次黃色的div是先平移了100px然后再縮放到原來的1/4，注意：這平移過后再縮放會將平移的值也跟著縮放，所以黃色的小方塊的最終平移要比小紅塊小。

平移和旋轉(zhuǎn)

看效果：

我對兩個(gè)方塊分別設(shè)置了：

這是怎么回事？效果怎么反過來了？

我們知道，dom元素的旋轉(zhuǎn)它是有一個(gè)旋轉(zhuǎn)基點(diǎn)的（圍繞哪個(gè)點(diǎn)旋轉(zhuǎn)）默認(rèn)的都是在dom元素的正中間

按照上面的分析，后寫的先執(zhí)行，我們來分析下

第一個(gè)小紅塊。先圍繞自身的中心點(diǎn)旋轉(zhuǎn)180度，然后向右平移100px，這個(gè)比較容易接受。

再來看小黃塊。它是先向右平移了100px,然后旋轉(zhuǎn)了180度。但是卻向左平移了。好像與我們的預(yù)期不一樣。

接下來我來解釋一下原因：

這是因?yàn)閠ransform的平移不會影響原來的旋轉(zhuǎn)基點(diǎn)的位置？什么意思呢？當(dāng)我先向右平移了100px后，我的旋轉(zhuǎn)基點(diǎn)還在原來的位置，也就是在我們的黃色方塊的左側(cè)。然后我們再去做旋轉(zhuǎn)的時(shí)候，是以之前左側(cè)的點(diǎn)進(jìn)行旋轉(zhuǎn)的。所以旋轉(zhuǎn)180度之后就繞到了旋轉(zhuǎn)基點(diǎn)的左側(cè)去了。

我拿gif來模擬一下這個(gè)過程吧。

一圖勝千言

綜上所述，我們可以得到兩個(gè)結(jié)論：

第二點(diǎn)很重要，后面我們在制作復(fù)雜的3D的時(shí)候會用到這兩個(gè)特性。

補(bǔ)充一句：如果想對旋轉(zhuǎn)基點(diǎn)進(jìn)行改變的話可以通過transform-origin:x ，y來設(shè)置 。具體細(xì)節(jié)我就不過多展開了。

下一知識點(diǎn)：

要想dom在三維空間中變換，那么景深肯定是逃不過的話題。前面我在我的《前端圖形學(xué)》的系列文章中有說到景深和相機(jī)的概念，那么應(yīng)用到CSS3中依然實(shí)用。

我們可以把景深看作是我們的眼睛或者threejs中的透視相機(jī)，其特點(diǎn)就是近大遠(yuǎn)小。

比如我設(shè)置 perspective:300px;那么表示的是，我離屏幕300px的位置去觀察dom元素。假如設(shè)置成500px,那么肯定要比300px的物體要顯示的小。

舉個(gè)栗子：

我們在父容器hover的時(shí)候，讓里面的小盒子繞X軸翻轉(zhuǎn)360deg，并且在父容器中設(shè)置了景深的樣式為：800px

當(dāng)我們再沿X軸旋轉(zhuǎn)的時(shí)候，立體的感覺就出來了，這個(gè)應(yīng)該比較簡單了，這也是后面我們做復(fù)雜3D的基礎(chǔ)。

讀到這里，這篇“CSS3特性實(shí)例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。