前言
繼一次的3D魔方之后，這次利用CSS3的transform、translate、rotate、preserve-3d等結合JS的requestAnimationFrame、class帶你一起玩轉性感美女秀，正常套路，請先一堵為快，有興趣繼續，沒興趣也可以看看美女養眼哦🤪！想直接在線預覽 👈
回顧：
看過上次的3D魔方的同學對於本次的分析會有一定的幫助,當然如果大佬您本身就對css3就已經玩的很666了，那么對於下文的分解就請扮演老師的角色吧，小弟如有不足之處，歡迎斧正。
解析：
創建列DIV ：
- 從上圖中我們能看出，每次旋轉的動畫是由多列小卡片組成的；
- 每列根據它的下標，對背景進行位移，做到拼接的效果，整體看起來就成了一張圖
- 一起來看一下真像是啥樣的：
colNode(){
//生成列的節點
for (var i=0;i<this.colLen;i++){
let iDivCol = document.createElement('div'); //列
iDivCol.className = "div-col";
iDivCol.style.width = this.colW+'px';
iDivCol.style.height = this.cubeH+'px';
iDivCol.style.zIndex = (i>this.colLen/2?this.colLen-i:i);
this.swiperEle.appendChild(iDivCol);
}
}
立體感的構成 ：
- 旋轉的立體感是如何構成的呢？
- 原理其實很簡單，可以理解成每列都是一個
立體魔方，它們都是相互獨立的， - 每列 backgroundPosition：index*xcolW,進行一個位移，
- 簡單來說，即每列內部都有6個面組成，每個面都以父級為目標進行 position、transform等設置，
- 一張圖，讓你看懂全世界：—— 圖五為完成輸出
//——[正、上、左、右]
for(var i = 0;i<4;i++){
let dividingLine = i<2;
let span = document.createElement('span');
span.className = `${dividingLine?'bg-img':'pure-color'} i${i}`;
span.style.width = `${dividingLine? this.colW:this.cubeH}px`;
span.style.height = this.cubeH+'px';
if(dividingLine){
span.style.backgroundPosition = `-${index*this.colW}px 0`;
};//首席填坑官∙蘇南的專欄 交流：912594095、公眾號：honeyBadger8
iDivCol.appendChild(span);
};
單列的布局結構 ：
- colNode方法中的
zIndex，需要注意一下，層級的調整，可以覆蓋立體透視造成的影響， - 單列的html布局及重點樣式，
/*四個面的樣式*/
...省略N行
.div-col span.i1{
/*top*/
transform-origin:top;
transform:translateZ(-360px) rotateX(90deg);
}
.div-col span.i2{
/*left*/
transform-origin: left;
transform: rotateY(90deg);
}
.div-col span.i3{
/*right*/
transform-origin:left;
transform:translateX(25px) rotateY(90deg);
}
切換 ：
- 布局完成后，我們只需要操控系列[
div-col]來進行旋轉即可， - 下圖為
transform-origin:50% 50% -180px，即設置旋轉的中心點：
- 鼠標經過都實現了，上下頁切換還遠嗎？
- 之前創建結構的時候，我們已知div的列數，
- 為了更好的裝B，我們在旋轉的時候，給每列都要添加一定延時
setTimeout，得以達到緩沖的視差， - 然后
requestAnimationFrame就該它出場了，setInterval已經成為過去式， - 同時旋轉前，還要設置下一頁，要顯示的圖片，
- 當然記得旋轉完成，后要重置角度哦。
...省略N行
swiperAnimate(){
const _requestAnimationFrame_ = window.requestAnimationFrame||window.WebkitRequestAnimationFrame;
const iDivCol = this.swiperEle.querySelectorAll(".div-col");
for(var i=0;i<iDivCol.length;i++){//首席填坑官∙蘇南的專欄 交流：912594095、公眾號：honeyBadger8
//讓動畫更逼真，給個過渡，當然也可以調整，requestAnimationFrame每次遞增的值，
iDivCol[i].style.WebkitTransition=`.8s -webkit-transform ease`;
iDivCol[i].style.WebkitTransformOrigin=iDivCol[i].style.transformOrigin = "50% 50% -180px";
this.animateMove(iDivCol[i],i,_requestAnimationFrame_);
}
}
animateMove(Col,index,animationFrame){
let ColNum =0;
let spanSurface = Col.querySelectorAll("span");
//即將旋轉到的面，展示的圖片
spanSurface[1].style.backgroundImage="url(./2.jpg)";
setTimeout(()=>{
//每列進行一個延時，以達到緩沖效果
this.rotate(Col,0,spanSurface,animationFrame);
},index*this.delayMilli);
}
...省略N行
上下翻頁 ：
- 上面基本已實現了旋轉的效果，再加一些修飾，
- 上下點擊切換的功能，注意的地方在於，防止重復點擊，當前旋轉中時不能點：
pageDown(){
if(this.status){
console.log("下翻，不能點擊")
return ;
};
this.status = 1;
this.pageNum = this.pageNum>=this.imageList.length ? 1 :++this.pageNum;
this.swiperAnimate();//首席填坑官∙蘇南的專欄 交流：912594095、公眾號：honeyBadger8
}
預加載 ：
- 因輪播圖圖片較多，且此示例的圖片每次只加載了兩張，故要對圖片進行一個預加載，
- 以及圖片加載出錯后的過濾，避免影響后續效果的呈現：
preloadingImage(){
this.imageList.map((k,v)=>{
let imgNode = new Image();
imgNode.onerror=err=>{
this.imageList.splice(v,1);
}
imgNode.src = k;//首席填坑官∙蘇南的專欄 交流：912594095、公眾號：honeyBadger8
});
}
總結：
一個效果實現的方式有很多種，比如我們可以設置6個面，每設置一次，都是展示一張圖，這樣就不用每次旋轉完后又去重置圖片、角度等問題，包括requestAnimationFrame動畫切換的過渡過程，也應該有更好的方式，新手上路中，歡迎各位大佬指點。以上就是今天為您帶來的分享，你GET到了嗎？如果覺得不錯，記得給個贊哦！
更多文章：
easy-mock 最好的備胎沒有之一
immutability因React官方出鏡之使用總結分享！
面試踩過的坑，都在這里了～
你應該做的前端性能優化之總結大全！
如何給localStorage設置一個過期時間？
動畫一點點 - 如何用CSS3畫出懂你的3D魔方？
作者：蘇南 - 首席填坑官
來源：@IT·平頭哥聯盟
鏈接：http://susouth.com/
交流：912594095、公眾號：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權，非商業轉載請注明原鏈接及出處。