CSS動(dòng)畫(huà)之旋轉(zhuǎn)魔方輪播

leone 發(fā)布于2019-08-29 15:10 / 579人閱讀

摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫(xiě)完這篇文章后確實(shí)感覺(jué)自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處

很久沒(méi)有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫(xiě)文章的deadline......
所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫(huà)有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)一些屬性并沒(méi)有深究細(xì)節(jié)。

在我自己寫(xiě)完這篇文章的時(shí)候, 才覺(jué)得CSS確實(shí)能夠?qū)崿F(xiàn)很多炫酷的效果。

本篇文章demo的完成自己也是查了很多相關(guān)知識(shí)點(diǎn)和借鑒了一些文章中的內(nèi)容。但不管怎樣, 作為一個(gè)前端菜鳥(niǎo), 總是在不斷學(xué)習(xí)中成長(zhǎng)的。這句話寫(xiě)在這里自己心里也安心一些。(逃......

最終的demo效果地址

下面我將一步一步詳解如何利用純CSS實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)魔方輪播的效果。

總的來(lái)說(shuō)我們需要實(shí)現(xiàn)以下兩個(gè)主要功能：

構(gòu)建一個(gè)能夠旋轉(zhuǎn)的立方體

讓立方體擁有基本輪播所具有的特性

但在完成以上兩點(diǎn)之前我們需要再次了解或熟悉一下實(shí)現(xiàn)其功能的CSS3基礎(chǔ)知識(shí)點(diǎn)：

transition

transform

perspective

preserve-3d

animation

transition屬性 --- 過(guò)渡效果

transition: property duration timing-fucntion delay;

這個(gè)屬性應(yīng)該都很熟悉, 也不過(guò)多講, 只是列出其所具有的所有子屬性。

過(guò)渡屬性 --- 過(guò)渡持續(xù)時(shí)間 --- 過(guò)渡函數(shù)(曲線) --- 過(guò)渡延遲

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out; 原生具有的基本過(guò)渡函數(shù)

transform屬性 --- 對(duì)元素進(jìn)行2D或3D轉(zhuǎn)換

它有幾個(gè)常用的變換方法：scale scale3d translate translate3d rotate rotate3d 等。

transform-origin: x-axis y-axis z-axis;  設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置

transform-style: preserve-3d; 讓轉(zhuǎn)換的子元素保留3D轉(zhuǎn)換(與perspective搭配使用)

perspective屬性 --- 讓元素實(shí)現(xiàn)3D透視效果

perspective: 1000px;
    它有兩種寫(xiě)法    
transform: perspective(1000px);

這個(gè)屬性讓物體具有立體的3D透視效果, 值越大物體離此時(shí)我們的眼睛看到屏幕里物體的距離就越遠(yuǎn), 相反若它的值越小, 離我們的視角就越近, 即在屏幕中顯示的大小就越大。它和preserve-3d共同使用在需要實(shí)現(xiàn)3D效果的父元素上搭建舞臺(tái)視角, 讓其子元素能夠?qū)崿F(xiàn)真正的3D轉(zhuǎn)換。

關(guān)于transform的詳細(xì)講解(張?chǎng)涡?

一個(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。

Cube

                                                                                            HTML

重要的CSS樣式

                                                                                            CSS
.cube-wrap{
    width: 300px;
    height: 300px;
    perspective: 1000px;
    position: relative;
}
.cube-wrap .cube{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all .5s ease;
}
.cube-wrap .cube .cube-face{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    opacity: 0.9;
    border: 1px solid #ccc;
}
.cube-wrap .cube .cube-face img{
    width: 100%;
    height: 100%;
}
.cube-face.front{
    transform: translateZ(150px);
}
.cube-face.back{
    transform: rotateX(180deg) translateZ(150px);
}
.cube-face.left{
    transform: rotateY(-90deg) translateZ(150px);
}
.cube-face.right{
    transform: rotateY(90deg) translateZ(150px);
}
.cube-face.top{
    transform: rotateX(90deg) translateZ(150px);
}
.cube-face.bottom{
    transform: rotateX(-90deg) translateZ(150px);
}

在這里我們給父元素使用了perspective和preserve-3d, 接下來(lái)子元素的3D變換效果才會(huì)生效。

那么重點(diǎn)來(lái)了, 上面的代碼是如何拼接為一個(gè)完整的立方體的呢？在瀏覽器開(kāi)發(fā)者工具里面仔細(xì)觀察一下不難發(fā)現(xiàn), 類名為cube元素所在位置是在立方體正中間的那一面。因此我們?cè)谌绾卫么a構(gòu)造立方體的每一面時(shí)就有了思路。

首先要清楚, transform相關(guān)變換時(shí)建立的空間直角坐標(biāo)系x, y , z軸的方向。

即以電腦屏幕為平面, 水平方向?yàn)閤軸, 豎直方向?yàn)閥軸, 垂直于屏幕方向的為z軸。

所以如何構(gòu)建立方體的六個(gè)面就變得很簡(jiǎn)單了, cube 面的初始位置在正中間, 整個(gè)立方體的長(zhǎng)度為 300px, 因此 translateZ(150px) 即為正面。要想構(gòu)造背面, 則先需要逆時(shí)針?lè)崔D(zhuǎn)初始面 180deg , 這時(shí)候的正面指向背面, 所以只需再 translateZ(150px) 即可。要構(gòu)造左面則需繞y軸旋轉(zhuǎn)rotateY(-90deg) , 相應(yīng)的右側(cè)則為rotateY(90deg) ,然后再進(jìn)行translateZ(150px) 的平移,剩下的兩個(gè)面同理按照相應(yīng)的邏輯進(jìn)行即可。需要注意的是當(dāng)一個(gè)面繞軸轉(zhuǎn)動(dòng)時(shí), 逆時(shí)針轉(zhuǎn)動(dòng)為正值, 順時(shí)針為負(fù)值。

animation屬性

這個(gè)屬性在CSS3動(dòng)畫(huà)中肯定是最重要的了, 它的每一個(gè)子屬性都值得我們?nèi)プ屑?xì)研究。

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

animation-delay: 1s;  設(shè)置為負(fù)值時(shí)讓動(dòng)畫(huà)馬上開(kāi)始, 并且跳過(guò)1秒前的動(dòng)畫(huà)

animation-direction: normal|reverse|alternate|alternate-reverse; 定義是否循環(huán)交替反向播放動(dòng)畫(huà)

alternate 動(dòng)畫(huà)在奇數(shù)次（1、3、5...）正向播放, 在偶數(shù)次（2、4、6...）反向播放
alternate-reverse 動(dòng)畫(huà)在奇數(shù)次（1、3、5...）反向播放, 在偶數(shù)次（2、4、6...）正向播放

animation-fill-mode: none|forwards|backwards|both; 規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí), 要應(yīng)用到元素的樣式

forwards 動(dòng)畫(huà)結(jié)束后停留在最后一幀
backwards 在animation-delay期間啟動(dòng)動(dòng)畫(huà)的第一幀屬性
both 同時(shí)實(shí)現(xiàn)forwards與backwards的效果

animation-play-state: paused|running; 控制動(dòng)畫(huà)暫停或運(yùn)行。

@keyframes 設(shè)置動(dòng)畫(huà)關(guān)鍵幀, 在這里我們用from...to或者百分比來(lái)實(shí)現(xiàn)自定義的動(dòng)畫(huà)

animation詳解

下面我們給已經(jīng)構(gòu)建好的立方體添加上animation動(dòng)畫(huà)：

                                                                                            CSS
.cube-wrap .cube{
    ......
    animation: spin 10s linear infinite;
}
@keyframes spin {
   from {
       transform: rotateX(45deg) rotateY(45deg);
   }
   to {
       transform: rotateX(405deg) rotateY(765deg);
   }
}

Carousel

現(xiàn)在我們已經(jīng)實(shí)現(xiàn)了能夠自由旋轉(zhuǎn)的立方體效果了, 接下來(lái)就需要完成輪播所具有的基本功能。

左右按鈕切換

底部按鈕切換

在實(shí)現(xiàn)這兩個(gè)功能之前我們需要了解一下兩個(gè)強(qiáng)大的HTML標(biāo)簽, 它們的配合使用實(shí)現(xiàn)了輪播圖中點(diǎn)擊切換的效果。它們就是label和input標(biāo)簽, 先來(lái)看看它們的基本用法。



 點(diǎn)擊label標(biāo)簽, id為1的input標(biāo)簽被選中

這里label標(biāo)簽中的for與input標(biāo)簽中的id相關(guān)聯(lián), 而input標(biāo)簽中type為radio時(shí)是選擇框的效果, 它具有一個(gè)checked的屬性 (若要實(shí)現(xiàn)單選框的效果, 則需要設(shè)置name="xxx" ,此時(shí)的名稱要一致, 下文就用到了這個(gè)效果)

現(xiàn)在就來(lái)開(kāi)始實(shí)現(xiàn)具體的效果吧。

先實(shí)現(xiàn)左右和底部的CSS樣式

                                                                                            CSS
.cube_left .cube_action{
    left: -75px;
    top: 50%;
    transform: translateY(-50%);
}
.cube_right .cube_action{
    right: -75px;
    top: 50%;
    transform: translateY(-50%);
}
.cube_action{
    background-color: #fafafa;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    width: 40px;
    height: 40px;
    opacity: 0.15;
    position: absolute;
    transition: opacity 0.5s ease;
    z-index: 5;
}
.cube_action:hover{
    opacity: 1;
}
.cube_action::before{
    border-bottom: 4px solid #111;
    border-right: 4px solid #111;
    content: "";
    display: block;
    height: 25%;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 25%;
    transform: translate(-70%, -50%) rotate(-45deg);
}
.cube_left .cube_action::before{
    transform: translate(-40%, -50%) rotate(135deg);
}
.indicators{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -80px;
    padding: 20px;
    text-align: center;
    opacity:0;
    transition: opacity .3s;
}
.container:hover .indicators{
    opacity: 1;
}
.indicators .indicator{
    background-color: #fafafa;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 6px;
    opacity: .15;
}
.controller{
    display: none;
}

寫(xiě)完上面的代碼后并不能看到我們想要的結(jié)果, 因?yàn)樗鼈兌夹枰猦over事件來(lái)觸發(fā)。

現(xiàn)在我們來(lái)設(shè)置最外層 container 的樣式以及定義一個(gè)入場(chǎng)動(dòng)畫(huà)。

                                                                                            CSS
.container{
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -300px;
    transition: all .5s ease;
    transform: scale(0.25);
}
.container:hover {
    transform: scale(1);
}
.container:hover .cube-wrap .cube{
    animation: entrance .5s ease ;
}
@keyframes entrance {
    from {
        transform: rotateX(-225deg) rotateY(-225deg);
    }
}

當(dāng)鼠標(biāo)移入立方體時(shí), 動(dòng)畫(huà)由spin被替換為entrance 。

那么重點(diǎn)再次出現(xiàn)了, 到底CSS是如何實(shí)現(xiàn)點(diǎn)擊切換輪播圖片的呢？

原理很簡(jiǎn)單, 其實(shí)就是搭配前面提到的label標(biāo)簽和input標(biāo)簽從而實(shí)現(xiàn)了驚人的效果。

                                                                                             CSS
.controller:nth-of-type(1):checked ~ .cube{
    transform: translateZ(-150px);
}
.controller:nth-of-type(2):checked ~ .cube{
    transform: translateZ(-150px) rotateX(-180deg) ;
}
.controller:nth-of-type(3):checked ~ .cube{
    transform: translateZ(-150px) rotateY(90deg) ;
}
.controller:nth-of-type(4):checked ~ .cube{
    transform: translateZ(-150px) rotateY(-90deg) ;
}
.controller:nth-of-type(5):checked ~ .cube{
    transform: translateZ(-150px) rotateX(-90deg) ;
}
.controller:nth-of-type(6):checked ~ .cube{
    transform: translateZ(-150px) rotateX(90deg) ;
}

無(wú)論是點(diǎn)擊左右的按鈕, 還是點(diǎn)擊底部的按鈕, 我們都觸發(fā)了label標(biāo)簽的for屬性從而聯(lián)動(dòng)了對(duì)應(yīng)的input標(biāo)簽中的checked屬性。

至于該如何將對(duì)應(yīng)的那一面反轉(zhuǎn)到正對(duì)屏幕的這一面, 只需要在構(gòu)造立方體每一面的轉(zhuǎn)換中將符號(hào)反向即可。

值得注意的是這里我們運(yùn)用的CSS選擇器也算是一個(gè)技巧, :nth-of-type(n) 選擇的是相同類型標(biāo)簽的第n個(gè)標(biāo)簽, ~符號(hào)選擇的是同級(jí)中的標(biāo)簽。

徹底理解nth-child和nth-of-type的區(qū)別

現(xiàn)在我們回過(guò)頭來(lái)再仔細(xì)看下開(kāi)頭的HTML結(jié)構(gòu), indicators 里面的label標(biāo)簽中的for好像能夠明白其邏輯, 即點(diǎn)擊哪一個(gè)標(biāo)簽就觸發(fā)哪一個(gè)input標(biāo)簽的checked屬性從而進(jìn)行相應(yīng)的3D轉(zhuǎn)換。可是左右按鈕中的label標(biāo)簽里的for數(shù)字順序咋看起來(lái)不對(duì)勁呢？

在這里我自己也琢磨了很久, 費(fèi)了很大的功夫才想明白原來(lái).cube_left或者.cube_right 中相應(yīng)的6個(gè)label標(biāo)簽是重合在一起的, 而且都為display:none , 這就很有意思了, 來(lái)看看接下來(lái)的代碼。

                                                                                             CSS
.container:hover .controller:nth-of-type(1):checked ~ .cube_left .cube_action:nth-of-type(1), 
.container:hover .controller:nth-of-type(1):checked ~ .cube_right .cube_action:nth-of-type(1){
    display: block;
}
.container:hover .controller:nth-of-type(2):checked ~ .cube_left .cube_action:nth-of-type(2),
.container:hover .controller:nth-of-type(2):checked ~ .cube_right .cube_action:nth-of-type(2){
    display: block;
}
......
......
......
.container:hover .controller:nth-of-type(6):checked ~ .cube_left .cube_action:nth-of-type(6),
.container:hover .controller:nth-of-type(6):checked ~ .cube_right .cube_action:nth-of-type(6){
    display: block;
}

現(xiàn)在我們默認(rèn)的是 controller 中的第一個(gè)元素被選中, 即它的checked屬性為true。因此左右按鈕里label標(biāo)簽中的第一個(gè)顯示為display:block , 若現(xiàn)在點(diǎn)擊左邊的按鈕, 我們希望立方體的底部呈現(xiàn)在屏幕的正面, 所以for應(yīng)該設(shè)置為6。若點(diǎn)擊右邊按鈕其第一個(gè)label標(biāo)簽的for應(yīng)該設(shè)置為2。按照這個(gè)邏輯, 我們也就明白了為什么.cube_left 或.cube_right中的for屬性是亂序的原因了。

至此, 我們已經(jīng)講解了如何實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)魔方輪播所需的主要內(nèi)容和知識(shí)點(diǎn), 剩下的就是一些完善界面的零碎的CSS樣式, 在這里就不再展示。寫(xiě)完這篇文章后確實(shí)感覺(jué)自己對(duì)CSS方面的知識(shí)又熟悉了不少... 但是前端的主力還是JavaScript, 5月份又得繼續(xù)深入學(xué)習(xí)JS方面的知識(shí)嘞......

PS: 本文參考內(nèi)容

關(guān)于transform的詳細(xì)講解(張?chǎng)涡?

animation詳解

徹底理解nth-child和nth-of-type的區(qū)別

demo的原始出處

云服務(wù)器 GPU云服務(wù)器旋轉(zhuǎn)的魔方html 按鈕旋轉(zhuǎn)動(dòng)畫(huà) 原生js橫向輪播旋轉(zhuǎn) 看動(dòng)畫(huà)學(xué)算法之:hashtable

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113147.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

leone

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

云主機(jī)怎么安裝網(wǎng)站-怎么在云主機(jī)上搭建網(wǎng)站？

閱讀 3092·2021-09-22 15:20
實(shí)現(xiàn)菜單下拉伸展折疊效果demo

閱讀 2610·2019-08-30 15:54
BFC淺談

閱讀 1975·2019-08-30 14:06
讀后總結(jié)--精通css高級(jí)web標(biāo)準(zhǔn)解決方案（第二版）

閱讀 3122·2019-08-30 13:05
create-react-app 2.1.8版本自定義配置

閱讀 2467·2019-08-29 18:36
CSS動(dòng)畫(huà)之旋轉(zhuǎn)魔方輪播

閱讀 580·2019-08-29 15:10
淺談工作中設(shè)計(jì)、制作和程序之間的配合

閱讀 533·2019-08-29 11:17
css 單位簡(jiǎn)單介紹

閱讀 833·2019-08-28 18:11

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS動(dòng)畫(huà)之旋轉(zhuǎn)魔方輪播

相關(guān)文章