整體實(shí)現(xiàn)思路介紹

整個(gè)案例使用到CSS3 和 HTML技術(shù)， 案例的核心知識(shí)點(diǎn) 使用到了 CSS3 中的透視 、3D變換、 動(dòng)畫(huà) 、無(wú)縫滾動(dòng)等技術(shù)要點(diǎn)， 下面我會(huì)逐一進(jìn)行介紹

• 知識(shí)點(diǎn)1: 一鏡到底特效的 案例的整體布局、設(shè)計(jì)、及動(dòng)畫(huà)思路

• 知識(shí)點(diǎn)2：CSS3中的3D坐標(biāo)系

• 知識(shí)點(diǎn)3：CSS3中的3D變換及案例應(yīng)用

• 知識(shí)點(diǎn)4：CSS3中的3D透視及案例應(yīng)用

• 知識(shí)點(diǎn)5：CSS3中的 透視及3d變換的異同點(diǎn)

• 知識(shí)點(diǎn)6：CSS3中的 動(dòng)畫(huà)及案例應(yīng)用

1、一鏡到底特效 的整體布局、設(shè)計(jì)、及動(dòng)畫(huà)思路

如下圖所示，一鏡到底的案例特效 最核心的就是要 構(gòu)成一套 在3D 空間中， 有多個(gè)平行的場(chǎng)景， 然后以攝像機(jī)的視角  從前往后 移動(dòng)，在場(chǎng)景中穿梭， 依次穿過(guò)每一個(gè)場(chǎng)景的頁(yè)面即可，自己閉上眼睛來(lái)體會(huì)一下吧。

對(duì)應(yīng)到本案例中效果就是這樣啦：

當(dāng)然有朋友會(huì)說(shuō)看上圖，感覺(jué)不到明顯的3D 立體效果， 那再來(lái)看看下面這個(gè)圖吧；

上面這張圖就是 基于人眼 看不同距離的物體呈現(xiàn)出的結(jié)果， 也就是透視效果， 透視效果最核心的特點(diǎn)就是近大遠(yuǎn)?。欢绊懣吹酵敢曃矬w大小的一個(gè)參數(shù)就是消失點(diǎn)距離， 比如消失點(diǎn)越近，最遠(yuǎn)處的物體會(huì)越小， 近大遠(yuǎn)小的效果越明顯， 自己閉上眼睛來(lái)體會(huì)一下吧。

對(duì)應(yīng)到本案例中效果就是這樣啦：

注意：本案例中 的主要功能是動(dòng)效， 所以在頁(yè)面框架布局上，大多使用的都是定位布局， 布局中的基礎(chǔ)概念 ‘子絕父相’ 就不用我多說(shuō)了吧

上述框架對(duì)應(yīng)的HTML源碼如下, 其中.sence-in 內(nèi)部的子元素是素材，可以先忽略：

知識(shí)點(diǎn)一： CSS3中的坐標(biāo)系

CSS3中的坐標(biāo)系，是一切3D 效果的基石， 務(wù)必熟練掌握 ， 如下圖所示：

• x軸坐標(biāo)：左邊負(fù)，右邊正

• y軸坐標(biāo)：上邊負(fù)，下邊正

• z軸坐標(biāo)：里面負(fù)，外面正

• 注意： 坐標(biāo)系的原點(diǎn)在 瀏覽器的左上角

知識(shí)點(diǎn)二： 透視(perspective)

perspective屬性定義了觀察者和Z=0平面之間的距離，從而為3D轉(zhuǎn)換元素創(chuàng)建透視效果。上面也說(shuō)了， 透視的效果就是 近大遠(yuǎn)小， 上面的截圖中也能看到 。這個(gè)屬性是用來(lái)創(chuàng)建3D轉(zhuǎn)換效果的必要屬性，因?yàn)楫?dāng)我們進(jìn)行旋轉(zhuǎn)或其他3D轉(zhuǎn)換時(shí)，如果透視效果設(shè)置得不正確，元素可能會(huì)顯得很奇怪或不正常。 透視的語(yǔ)法如下：

在CSS中，我們可以通過(guò)在父元素上設(shè)置perspective屬性來(lái)控制子元素的3D效果。例如：

.container {  

  perspective: 1000px;  

}

在這個(gè)例子中，我們?yōu)?code>.container元素設(shè)置了perspective屬性，值為1000px。這意味著任何在這個(gè)元素內(nèi)部的3D轉(zhuǎn)換都會(huì)基于這個(gè)視距進(jìn)行透視。

知識(shí)點(diǎn)三：3D 變換的核心屬性： transform-style

transform-style屬性決定了是否保留元素的三維空間布局。當(dāng)設(shè)置為preserve-3d時(shí)，它會(huì)保留元素內(nèi)部的三維空間，即使這個(gè)元素本身沒(méi)有進(jìn)行任何3D轉(zhuǎn)換。這使得子元素可以相對(duì)于父元素進(jìn)行旋轉(zhuǎn)或其他3D轉(zhuǎn)換，而不會(huì)影響其他元素。在我們的案例截圖中 也能看出在父元素設(shè)置了 transform-style: preserve-3d;屬性后， 各個(gè)場(chǎng)景在 Z軸方向上，已經(jīng)有了前后距離上的差異了。  需要注意的點(diǎn)就是， transform-style屬性一定要設(shè)置給發(fā)生3D變換元素的父元素

例如：

 /* 透視屬性加給了 最外層的元素， 保證所有子元素的透視效果是一致的，協(xié)調(diào)的*/

.perspective-box {  

  transform-style: preserve-3d;  

}

在這個(gè)例子中，我們?yōu)?code>.perspective-box元素設(shè)置了transform-style屬性為preserve-3d，這意味著任何在這個(gè)元素內(nèi)部的3D轉(zhuǎn)換都會(huì)保留其三維空間布局。

• 小技巧：如果你希望自己做的3D場(chǎng)景，立體效果很真實(shí)的話， 可以盡量多的給不同的元素，設(shè)置在Z軸方向上 設(shè)置不同的偏移量， 這樣的效果是 攝像機(jī)在穿梭的過(guò)程中，每一段距離都能看到不同的風(fēng)景， 層次感會(huì)很強(qiáng)， 當(dāng)然也不要太瘋狂， 不然場(chǎng)景會(huì)變得混亂哦

知識(shí)點(diǎn)四、perspective和transform-style的差異和注意點(diǎn)(炒雞重要！)

• perspective屬性定義了觀察者和Z=0平面之間的距離，通俗的說(shuō) 就是屏幕 到消失點(diǎn)的距離，從而影響3D元素的透視效果, 而transform-style屬性決定了是否保留元素的三維空間布局

• 當(dāng)我們只使用perspective屬性時(shí)，只有被明確設(shè)置為3D轉(zhuǎn)換的元素才會(huì)顯示透視效果。而當(dāng)我們使用transform-style: preserve-3d時(shí)，即使元素本身沒(méi)有進(jìn)行任何3D轉(zhuǎn)換，其子元素也可以進(jìn)行3D轉(zhuǎn)換并保留三維空間布局。

注意：perspective屬性，只能帶來(lái)近大遠(yuǎn)小的透視視覺(jué)效果，并不能構(gòu)成真正的3D空間布局。真正的3D布局必須依賴于transform-style: preserve-3d屬性來(lái)實(shí)現(xiàn)

知識(shí)點(diǎn)五、animation動(dòng)畫(huà)的定義和使用

CSS動(dòng)畫(huà)是一種使元素從一種樣式逐漸改變?yōu)榱硪环N樣式的方法。這個(gè)過(guò)程是通過(guò)關(guān)鍵幀（keyframes）來(lái)定義的，關(guān)鍵幀定義了動(dòng)畫(huà)過(guò)程中的不同狀態(tài)。 在一鏡到底的案例中， 整個(gè)場(chǎng)景的前后移動(dòng)，用的就是動(dòng)畫(huà)屬性。

動(dòng)畫(huà)的使用分為兩步， 具體使用方式如下：

• 1.使用@keyframes 來(lái)定義動(dòng)畫(huà)

• 2.使用animation屬性來(lái)調(diào)用動(dòng)畫(huà)，

@keyframes rotate {  

  from { transform: rotateX(0deg); }  

  to { transform: rotateX(360deg); }  

}

在這個(gè)例子中，我們定義了一個(gè)名為“rotate”的關(guān)鍵幀動(dòng)畫(huà)，使元素從X軸的0度旋轉(zhuǎn)到360度。然后，我們可以通過(guò)將這個(gè)動(dòng)畫(huà)應(yīng)用到HTML元素上來(lái)使用它：

.perspective-content {  

  animation: rotate 5s infinite linear;  

}

在這個(gè)例子中，我們將“rotate”動(dòng)畫(huà)應(yīng)用到.cube元素上，設(shè)置動(dòng)畫(huà)時(shí)間為5秒，無(wú)限循環(huán)，并且線性過(guò)渡;

在一鏡到底的案例中， 我們定義的動(dòng)畫(huà)如下：

上午動(dòng)畫(huà) 其實(shí)做了一個(gè)無(wú)線循環(huán)輪播的邏輯， 就是當(dāng) 在Z軸方向上 從 0 移動(dòng)到 6000距離以后， 在重置到-6000px, 這樣就可以在從-6000繼續(xù)向前移動(dòng)， 移動(dòng)到 0 ，達(dá)到一個(gè)循環(huán)， 再開(kāi)始下一次的循環(huán)；

• 小技巧： 你可以把動(dòng)畫(huà) 單獨(dú)加給每個(gè)場(chǎng)景（可能有10多個(gè)子元素， 你的重復(fù)寫(xiě)10多遍，會(huì)很麻煩的），也可以把動(dòng)畫(huà)加給公共的父元素，父元素會(huì)帶著里面的子元素一起動(dòng)， 這樣只用寫(xiě)一次就行哦。

作者：IT大春哥
鏈接：https://juejin.cn/post/7325739662033879090
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。