摘要:關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處
很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......
所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過一些屬性并沒有深究細節。
在我自己寫完這篇文章的時候, 才覺得CSS確實能夠實現很多炫酷的效果。
本篇文章demo的完成自己也是查了很多相關知識點和借鑒了一些文章中的內容。但不管怎樣, 作為一個前端菜鳥, 總是在不斷學習中成長的。這句話寫在這里自己心里也安心一些。(逃......
最終的demo效果地址下面我將一步一步詳解如何利用純CSS實現一個旋轉魔方輪播的效果。
總的來說我們需要實現以下兩個主要功能:
構建一個能夠旋轉的立方體
讓立方體擁有基本輪播所具有的特性
但在完成以上兩點之前我們需要再次了解或熟悉一下實現其功能的CSS3基礎知識點:
transition
transform
perspective
preserve-3d
animation
transition屬性 --- 過渡效果transition: property duration timing-fucntion delay;
這個屬性應該都很熟悉, 也不過多講, 只是列出其所具有的所有子屬性。
過渡屬性 --- 過渡持續時間 --- 過渡函數(曲線) --- 過渡延遲
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out; 原生具有的基本過渡函數transform屬性 --- 對元素進行2D或3D轉換
它有幾個常用的變換方法:scale scale3d translate translate3d rotate rotate3d 等。
transform-origin: x-axis y-axis z-axis; 設置旋轉元素的基點位置 transform-style: preserve-3d; 讓轉換的子元素保留3D轉換(與perspective搭配使用)perspective屬性 --- 讓元素實現3D透視效果
perspective: 1000px; 它有兩種寫法 transform: perspective(1000px);
這個屬性讓物體具有立體的3D透視效果, 值越大物體離此時我們的眼睛看到屏幕里物體的距離就越遠, 相反若它的值越小, 離我們的視角就越近, 即在屏幕中顯示的大小就越大。它和preserve-3d共同使用在需要實現3D效果的父元素上搭建舞臺視角, 讓其子元素能夠實現真正的3D轉換。
關于transform的詳細講解(張鑫旭)一個基本的立方體就需要結合以上三點屬性來實現。
CubeHTML重要的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, 接下來子元素的3D變換效果才會生效。
那么重點來了, 上面的代碼是如何拼接為一個完整的立方體的呢?在瀏覽器開發者工具里面仔細觀察一下不難發現, 類名為cube元素所在位置是在立方體正中間的那一面。因此我們在如何利用代碼構造立方體的每一面時就有了思路。
首先要清楚, transform相關變換時建立的空間直角坐標系x, y , z軸的方向。
即以電腦屏幕為平面, 水平方向為x軸, 豎直方向為y軸, 垂直于屏幕方向的為z軸。
所以如何構建立方體的六個面就變得很簡單了, cube 面的初始位置在正中間, 整個立方體的長度為 300px, 因此 translateZ(150px) 即為正面。要想構造背面, 則先需要逆時針反轉初始面 180deg , 這時候的正面指向背面, 所以只需再 translateZ(150px) 即可。要構造左面則需繞y軸旋轉rotateY(-90deg) , 相應的右側則為rotateY(90deg) ,然后再進行translateZ(150px) 的平移,剩下的兩個面同理按照相應的邏輯進行即可。 需要注意的是當一個面繞軸轉動時, 逆時針轉動為正值, 順時針為負值。
animation屬性這個屬性在CSS3動畫中肯定是最重要的了, 它的每一個子屬性都值得我們去仔細研究。
animation: name duration timing-function delay iteration-count direction fill-mode play-state; animation-delay: 1s; 設置為負值時讓動畫馬上開始, 并且跳過1秒前的動畫 animation-direction: normal|reverse|alternate|alternate-reverse; 定義是否循環交替反向播放動畫 alternate 動畫在奇數次(1、3、5...)正向播放, 在偶數次(2、4、6...)反向播放 alternate-reverse 動畫在奇數次(1、3、5...)反向播放, 在偶數次(2、4、6...)正向播放 animation-fill-mode: none|forwards|backwards|both; 規定當動畫不播放時, 要應用到元素的樣式 forwards 動畫結束后停留在最后一幀 backwards 在animation-delay期間啟動動畫的第一幀屬性 both 同時實現forwards與backwards的效果 animation-play-state: paused|running; 控制動畫暫停或運行。 @keyframes 設置動畫關鍵幀, 在這里我們用from...to或者百分比來實現自定義的動畫animation詳解
下面我們給已經構建好的立方體添加上animation動畫:
CSS .cube-wrap .cube{ ...... animation: spin 10s linear infinite; } @keyframes spin { from { transform: rotateX(45deg) rotateY(45deg); } to { transform: rotateX(405deg) rotateY(765deg); } }Carousel
現在我們已經實現了能夠自由旋轉的立方體效果了, 接下來就需要完成輪播所具有的基本功能。
左右按鈕切換
底部按鈕切換
在實現這兩個功能之前我們需要了解一下兩個強大的HTML標簽, 它們的配合使用實現了輪播圖中點擊切換的效果。它們就是label和input標簽, 先來看看它們的基本用法。
點擊label標簽, id為1的input標簽被選中
這里label標簽中的for與input標簽中的id相關聯, 而input標簽中type為radio時是選擇框的效果, 它具有一個checked的屬性 (若要實現單選框的效果, 則需要設置name="xxx" ,此時的名稱要一致, 下文就用到了這個效果)
現在就來開始實現具體的效果吧。
HTML先實現左右和底部的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; }
寫完上面的代碼后并不能看到我們想要的結果, 因為它們都需要hover事件來觸發。
現在我們來設置最外層 container 的樣式以及定義一個入場動畫。
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); } }
當鼠標移入立方體時, 動畫由spin被替換為entrance 。
那么重點再次出現了, 到底CSS是如何實現點擊切換輪播圖片的呢?
原理很簡單, 其實就是搭配前面提到的label標簽和input標簽從而實現了驚人的效果。
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) ; }
無論是點擊左右的按鈕, 還是點擊底部的按鈕, 我們都觸發了label標簽的for屬性從而聯動了對應的input標簽中的checked屬性。
至于該如何將對應的那一面反轉到正對屏幕的這一面, 只需要在構造立方體每一面的轉換中將符號反向即可。
值得注意的是這里我們運用的CSS選擇器也算是一個技巧, :nth-of-type(n) 選擇的是相同類型標簽的第n個標簽, ~符號選擇的是同級中的標簽。
徹底理解nth-child和nth-of-type的區別
現在我們回過頭來再仔細看下開頭的HTML結構, indicators 里面的label標簽中的for好像能夠明白其邏輯, 即點擊哪一個標簽就觸發哪一個input標簽的checked屬性從而進行相應的3D轉換。 可是左右按鈕中的label標簽里的for數字順序咋看起來不對勁呢?
在這里我自己也琢磨了很久, 費了很大的功夫才想明白原來.cube_left或者.cube_right 中相應的6個label標簽是重合在一起的, 而且都為display:none , 這就很有意思了, 來看看接下來的代碼。
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; }
現在我們默認的是 controller 中的第一個元素被選中, 即它的checked屬性為true。因此左右按鈕里label標簽中的第一個顯示為display:block , 若現在點擊左邊的按鈕, 我們希望立方體的底部呈現在屏幕的正面, 所以for應該設置為6。若點擊右邊按鈕其第一個label標簽的for應該設置為2。按照這個邏輯, 我們也就明白了為什么.cube_left 或.cube_right中的for屬性是亂序的原因了。
至此, 我們已經講解了如何實現一個旋轉魔方輪播所需的主要內容和知識點, 剩下的就是一些完善界面的零碎的CSS樣式, 在這里就不再展示。寫完這篇文章后確實感覺自己對CSS方面的知識又熟悉了不少... 但是前端的主力還是JavaScript, 5月份又得繼續深入學習JS方面的知識嘞......
PS: 本文參考內容
關于transform的詳細講解(張鑫旭)
animation詳解
徹底理解nth-child和nth-of-type的區別
demo的原始出處
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52264.html
摘要:關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處 很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...
摘要:說明魔方大家應該是不會陌生的,這次我們來一起用實現一個魔方旋轉的特效,先來看看效果圖解釋我們要做這樣的效果,重點在于怎么把張圖片,擺放成魔方的樣子,而把它們擺放成魔方的樣子,重點在于用好的,這是非常重要的,好的,我們先拼出一個魔方的樣子。 說明 魔方大家應該是不會陌生的,這次我們來一起用CSS實現一個魔方旋轉的特效,先來看看效果圖! showImg(https://segment...
摘要:說明魔方大家應該是不會陌生的,這次我們來一起用實現一個魔方旋轉的特效,先來看看效果圖解釋我們要做這樣的效果,重點在于怎么把張圖片,擺放成魔方的樣子,而把它們擺放成魔方的樣子,重點在于用好的,這是非常重要的,好的,我們先拼出一個魔方的樣子。 說明 魔方大家應該是不會陌生的,這次我們來一起用CSS實現一個魔方旋轉的特效,先來看看效果圖! showImg(https://segment...
摘要:說明魔方大家應該是不會陌生的,這次我們來一起用實現一個魔方旋轉的特效,先來看看效果圖解釋我們要做這樣的效果,重點在于怎么把張圖片,擺放成魔方的樣子,而把它們擺放成魔方的樣子,重點在于用好的,這是非常重要的,好的,我們先拼出一個魔方的樣子。 說明 魔方大家應該是不會陌生的,這次我們來一起用CSS實現一個魔方旋轉的特效,先來看看效果圖! showImg(https://segment...
閱讀 1735·2023-04-25 19:37
閱讀 1297·2021-11-16 11:45
閱讀 2802·2021-10-18 13:30
閱讀 2763·2021-09-29 09:34
閱讀 1615·2019-08-30 15:55
閱讀 3110·2019-08-30 11:10
閱讀 1833·2019-08-29 16:52
閱讀 994·2019-08-29 13:18