何使用CSS3畫出懂你的3D魔方~

前言

最近在寫《每周動畫點點系列》文章，上一期分享了< 手把手教你如何繪制一輛會跑車 >，本期給大家?guī)硎墙Y(jié)合CSS3畫出來的一個立體3d魔方，結(jié)合了js讓你隨心所欲想怎么轉(zhuǎn)，就怎么轉(zhuǎn)，這里是 @IT·平頭哥聯(lián)盟，我是首席填坑官?蘇南(South·Su)，我們先來看看效果，然后再分解它的實現(xiàn)過程吧

示例展示

繪制過程：

好吧，gif圖看著好像有點不是很清晰，想在線預(yù)覽的同學(xué)，可點擊在線預(yù)覽 ，廢話不多扯了，先來分析一下，看如何實現(xiàn)這個功能吧。

? API預(yù)熱 ：

• 本次示例是一個立體的正方形，既然有立體效果，肯定少不了CSS3中的 -webkit-perspective-透視、preserve-3d-三維空間，這個兩個是重點哦，當(dāng)然還有transform-origin、transition、transform等，先來回故一下 API 怎么是講的吧：

perspective 取值 :

• none ：不指定透視 ;

• length ：指定觀察者與「z=0」平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。「z>0」的三維元素比正常大，而「z<0」時則比正常小，大小程度由該屬性的值決定，不允許負(fù)值。

transform-style 取值 ：

• flat ：指定子元素位于此元素所在平面內(nèi);

• preserve-3d ：指定子元素定位在三維空間內(nèi),當(dāng)該屬性值為 preserve-3d時，元素將會創(chuàng)建局部堆疊上下文;

• 小結(jié) ：決定一個變換元素看起來是處在三維空間還是平面內(nèi)，需要該元素的父元素上定義 <' transform-style '> 屬性，也就是說想某元素有三維效果，需要設(shè)定它的父級有 preserve-3d。

transform-origin 取值 ：

• percentage：用百分比指定坐標(biāo)值。可以為負(fù)值;

• length：用長度值指定坐標(biāo)值。可以為負(fù)值;

• left：指定原點的橫坐標(biāo)為left;

• center①：指定原點的橫坐標(biāo)為center;

• right：指定原點的橫坐標(biāo)為right;

• top：指定原點的縱坐標(biāo)為top;

• center②：指定原點的縱坐標(biāo)為center;

• bottom：指定原點的縱坐標(biāo)為bottom;

• transform、transition等，就不介紹了

/*perspective使用示例：*/div{-webkit-perspective:600px;perspective:600px;}/*transform-style使用示例：*/.preserve{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;}/*transform-origin使用示例：*/.preserve{-webkit-transform-origin:50%50%-100px;or-webkit-transform-origin:bottom;or-webkit-transform-origin:top;…………}

? 繪制6個面 ：

• 是的，我沒有說錯，就是6個面：上、正面、下、背面、左、右，

• 上面API講了這么多，來實踐試一下吧，寫6個div,結(jié)構(gòu)大概是這樣的，也是接下來的魔方需要的結(jié)構(gòu)：

<divclass="cube"><divclass="cube-innerrunning"><pclass="single-sides1"><span>最</span></p><pclass="single-sides2"><span>懂</span></p><pclass="single-sides3"><span>你</span></p><pclass="single-sides4"><span>的</span></p><pclass="single-sides5"><span>魔</span></p><pclass="single-sides6"><span>方</span></p></div></div>

@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享

• ！！！發(fā)生了什么？？是不是很吃驚？？說好的值越大，透視效果越強(qiáng)的呢？后面明明藏了個妹子，怎么看沒有透視出來？

• 開始我也是跟你一樣吃驚的，但瞬間就悟透了，少了rotate,加個它再來看看效果吧：

我公Z好 o：honeyBadger8

.cube{width:200px;height:200px;margin:10pxauto;padding:260px;position:relative;-webkit-perspective:600px;perspective:600px;transition:.5s;}.cube-inner{width:200px;height:200px;position:relative;-webkit-transform-style:preserve-3d;transition:.3s;-webkit-transform-origin:50%50%-100px;transform:rotateX(45deg);}.cube:hover{/*鼠標(biāo)經(jīng)過時，把perspective過渡到100*/-webkit-perspective:100px;perspective:100px;}

• 既然API有效，那么拉下來我們就畫出6個面吧，按：上、正面、下、背面、左、右，這個順序來設(shè)置吧;

• 首先，我們要指定它們是在三維空間內(nèi)的preserve-3d，也就是6個面的父級要設(shè)置 transform-style 樣式;

• 以上都設(shè)置好后，再來看看6個面吧，為了便于區(qū)分，給它們每個都設(shè)置了不同顏色(用了css3的漸變 radial-gradient)——不想手寫的同學(xué)推薦一個網(wǎng)站可在線設(shè)置你要的效果，復(fù)制樣式即可，先來一睹風(fēng)采,為了便于觀察，整體角度旋轉(zhuǎn)了10deg：

動畫一點點之 6個面的元素的演示

• 說到漸變，偶然之間發(fā)現(xiàn)了一個有意思的東西hue-rotate，它能在你初始的顏色基礎(chǔ)上旋轉(zhuǎn)元素的色調(diào)及其內(nèi)容，從而達(dá)到不同的效果。了解更多

hue-rotate : The hue-rotate() CSS function rotates the hue of an element and its contents. Its result is a .

• 上 - "最"：

.cube-inner.single-side.s1{/*s1頂部*/left:0;top:-200px;background:radial-gradient(circle,rgba(255,255,255,.88),#00adff);background:-webkit-radial-gradient(circle,rgba(255,255,255,.88),#00adff);transform-origin:bottom;-webkit-transform-origin:bottom;transform:rotateX(90deg);-webkit-transform:rotateX(90deg);}

本文由@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享

• 正面 - "懂"：

• 下面就是默認(rèn)的，什么都不用設(shè)置，所以就不展示了 ;

• 下面 - "你"：

• 即底部，底部的設(shè)置，正好跟頂部它是相反的，一個origin 以 bottom為基準(zhǔn)為坐標(biāo)，一個以top為基準(zhǔn)為坐標(biāo);

.cube-inner.single-side.s3{/*s3底部*/left:0;top:200px;background:radial-gradient(circle,rgba(255,255,255,.88),#100067);background:-webkit-radial-gradient(circle,rgba(255,255,255,.88),#100067);transform-origin:top;-webkit-transform-origin:top;transform:rotateX(-90deg);-webkit-transform:rotateX(-90deg);}

• 背面 - "的"：

• 即正面的后邊，整體旋轉(zhuǎn)了 135deg，讓背面更直觀能看到;

• translateZ 、rotateX 同時移動，形成透視的關(guān)系，讓它看起來，在正面面的后面;

• 下圖二，把默認(rèn)的正面，設(shè)置了透明度，可以看出，背面的透視效果;

.cube-inner.single-side.s4{/*s4背部*/z-index:2;left:0;top:0;background:radial-gradient(circle,rgba(255,255,255,.88),#F0C);background:-webkit-radial-gradient(circle,rgba(255,255,255,.88),#F0C);transform:translateZ(-200px)rotateX(180deg);-webkit-transform:translateZ(-200px)rotateX(180deg);/*rotateZ(-180deg)左右旋轉(zhuǎn)的時候，Z軸旋轉(zhuǎn)180°，因為字是倒著的*/}

@IT·平頭哥聯(lián)盟-首席填坑官?蘇南分享

• 左側(cè)面 - "魔"：

• origin以right為基準(zhǔn)，left負(fù)元素的寬度，rotateY軸旋轉(zhuǎn)90deg;

.cube-inner.single-side.s5{/*s5左側(cè)*/left:-200px;top:0;background:radial-gradient(circle,rgba(255,255,255,.88),rgba(33,33,33,1));background:-webkit-radial-gradient(circle,rgba(255,255,255,.88),rgba(33,33,33,1));transform-origin:right;-webkit-transform-origin:right;transform:rotateY(-90deg)-webkit-transform:rotateY(-90deg)}

• 右側(cè)面 - "方"：

• 同理右側(cè)，與左側(cè)正好相反;

.cube-inner.single-side.s6{/*s6右側(cè)*/right:-200px;top:0;transform-origin:left;-webkit-transform-origin:left;background:radial-gradient(circle,rgba(255,255,255,.88),#f00);background:-webkit-radial-gradient(circle,rgba(255,255,255,.88),#f00);transform:rotateY(90deg);-webkit-transform:rotateY(90deg);}

小結(jié) ： 嗯,以上魔方的6個面的繪制過程，基本已經(jīng)完成，主要在在于transform-origin、rotate、translate等屬性的應(yīng)用，但為了讓它更炫酷一些，我們還要給邊角加一些光感。

? 添加高光 ：

• 細(xì)心的寶寶，前面的布局應(yīng)該已經(jīng)發(fā)現(xiàn)了，每一行布局的p標(biāo)簽里，都多套了一層span，就是為高光光感，埋下的伏筆，一個平面正方形有四個邊，after、before只有兩，那么肯定要再套一層，當(dāng)然方法很多，比如直接用border也是可以的，但比較麻煩，我就選擇了現(xiàn)在要講的這種：

• after、before設(shè)置1px的邊框，設(shè)置一個線性漸變，中間是白色，兩斷是過渡到透明的，這樣高光就有了，來看一組圖吧：

動畫一點點之 6個面的元素鼠標(biāo)經(jīng)過

? CSS 360°旋轉(zhuǎn) ：

• 上面是一個鼠標(biāo)經(jīng)過的過渡動畫，可以看出立體效果是已經(jīng)有了，接下來就寫一個CSS animation的動畫，讓它360度旋轉(zhuǎn)，每個角都能看到，這樣會顯的很666;

• animation 配合 keyframes 使用，請看代碼示例：

.cube.cube-inner{/*-webkit-transform:rotateX(180deg)rotateY(0deg);*/animation:elfCube10sinfiniteease-in-out;-webkit-animation:elfCube10sinfiniteeasealternate;}@keyframeselfCube{0%{transform:rotateX(0deg)rotateY(0deg);}50%{transform:rotateX(360deg)rotateY(360deg);}100%{transform:rotateX(0deg)rotateY(0deg);}}@-webkit-keyframeselfCube{0%{-webkit-transform:rotateX(0deg)rotateY(0deg);}50%{-webkit-transform:rotateX(360deg)rotateY(360deg);}100%{transform:rotateX(0deg)rotateY(0deg);}}

每周動畫一點點之 6個面的元素之360度旋轉(zhuǎn)

? 跟隨鼠標(biāo)旋轉(zhuǎn) ：

• 說好的隨著鼠標(biāo)旋轉(zhuǎn)呢？？

• 別慌，接下來就是帶你裝逼，帶你飛的時候，

• 首先我們要了解，鼠標(biāo)在容器內(nèi)所在的位置，X = e.pageX - ele.offsetLeft, Y = e.pageY - ele.offsetTop;

• 同時要知道元素內(nèi)的中心點：centerX = width/2,centerY =height/2;

• 然后得出值：axisX = X - centerX，axisY = Y - centerY;

• PS ： 開始嘗試想的是鼠標(biāo)從哪個方向進(jìn)入，得到它的角度，但發(fā)現(xiàn)旋轉(zhuǎn)效果不明顯 ，有興趣的同學(xué)可以嘗試一下：(((Math.atan2(Y, X) * (180 / Math.PI)) + 180) / 90)，參考司徒大神的JS判斷鼠標(biāo)從什么方向進(jìn)入一個容器;

• 最后，給容器綁上事件：mouseover、mousemove、mouseout，鼠標(biāo)進(jìn)入時，暫停css的動畫，不然會相互打架哦！

動畫一點點之 6個面的元素之360度旋轉(zhuǎn)

……getAxisX(e){letleft=this.cubeEle.offsetLeft;returne.pageX-left-(this.cubeW/2)*(this.cubeW>this.cubeH?this.cubeH/this.cubeW:1);}getAxisY(e){lettop=this.cubeEle.offsetTop;returne.pageY-top-(this.cubeH/2)*(this.cubeH>this.cubeW?this.cubeW/this.cubeH:1);}……………………run(){this.cubeEle.addEventListener('mouseover',(e)=>this.hoverOut(e),false);this.cubeEle.addEventListener('mousemove',(e)=>this.move(e),false);this.cubeEle.addEventListener('mouseout',(e)=>this.hoverOut(e),false);}hoverOut(e){//進(jìn)入/離開e.preventDefault();this.axisX=this.getAxisX(e),this.axisY=this.getAxisY(e);if(e.type=='mouseout'){//離開this.axisX=0;this.axisY=0;console.log("離開")this.cubeInner.className="cube-innerrunning";}else{this.cubeInner.className="cube-inner";console.log("進(jìn)入")};letrotate=`rotateX(${-this.axisY}deg)rotateY(${-this.axisX}deg)`;this.cubeInner.style.WebkitTransform=this.cubeInner.style.transform=rotate;}……

結(jié)尾：

• -webkit-perspective，

• -webkit-transform-style，

• -webkit-transform-origin，

• radial-gradient、linear-gradient，

• transform：rotate、translate、scale，

• transition，

• animation;

• 以上就是今天為大家?guī)淼姆窒恚约笆褂玫降闹R點的API，如文章中有不對之處，煩請各位大神斧正，

• 源碼請加G眾好：honeyBadger8，這上面不讓發(fā)鏈接

對前端的技術(shù)感興趣/或想入門前端的同學(xué)可關(guān)注我的頭條號，并在后臺私信發(fā)送關(guān)鍵字：“前端”加入跟我們一起成長或公Z好：honeyBadger8，歡迎來撩哦～

作者：蘇南 - 首席填坑官

鏈接：https://honeybadger8.github.io/blog/

交Q：912594095、公Z好：honeyBadger8

本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明原鏈接及出處。

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅

SS3實現(xiàn)導(dǎo)航魔方旋轉(zhuǎn)展示效果

點擊導(dǎo)航列表，展示位會隨著你點擊的內(nèi)容顯示對應(yīng)的內(nèi)容區(qū)域，給人看著是不是有點高大上的感覺。感興趣的小伙伴可以多多交流，有錯誤之處可以指出來，大家共同進(jìn)步。

具體實現(xiàn)的代碼

html:

css:

javascript：