3D立方體旋轉相冊

抖音最火3D立方體旋轉相冊

前言
這是一個漫長的寒假，歷史上從未有過如此的時刻，人們這樣空前團結，這樣的宅，着實如抖音所說「晚上七點，像凌晨三點」。

不過我相信黎明的曙光終將到來，逆戰的腳步終將不會停止。
好了，扯得有點遠了，直接上乾貨吧。我是纔開始學習web前端技術不久，在大學之前根本不懂得什麼的前端，寫這篇博客的初衷就是一是回顧，二是爲了避免後來人踩雷。 所以我不會像大多權威官方博客一樣的copy definitely（定義），滿屏概念，我只能以一個初學者的口吻來講述一些。
實現屬性說明
之前抖音火了一時的程序員3D立方體旋轉相冊，在這裏，我就訴說一下我的實現流程，所謂3D，當然要有三維空間的概念，那就離不開X,Y,Z軸。而我們用到的屬性，有這些，以下爲步奏。
1，父元素寬高設爲一樣大小。再讓父元素形成一個3D空間，給父元素加上transform-style:preserve-3d;屬性，同時父元素進行定位讓子元素能隨父元素定位。
2，正方體有6個面，所以有6個子元素，子元素定位好了，會看到一個正方形，那是因爲所有的子元素疊在一起了，此時將第一個子元素進行位移translateX(-子元素寬度的一半)，並繞Y軸旋轉-90deg，rotateY（-90deg）形成正方體的左面。第二個子元素則位移translateX(子元素寬度的一半)，並進行rotateY（90deg），形成正方體的右面。第三個則位移translateY(子元素高度的一半)，並進行rotateX（-90deg），形成正方體的下面。第四個則位移translateY(-子元素高度的一半)，並進行rotateX（90deg），形成正方體的上面。第五個則 位移translateZ(-子元素寬度的一半)，並進行rotateY（180deg） ，形成正方體的後面。最後一個則位移translateZ(子元素寬度的一半)，並進行rotateY（0deg）， 形成正方體的前面。
3，最後給子元素加上背景圖片，寫一個旋轉動畫@keyframe move{from{transform:rotateX(30deg) rotateY(0deg);to{transform:rotateX(30deg) rotateY(0deg);}用animation屬性給父元素加上這個動畫 這個3D立方體相冊大致就完成了。
代碼實現：
Html部分：

css部分：

父元素旋轉代碼：

控制子元素旋轉位移：

最後效果實現：

當然，可以再加點修飾，比如，透明，比如鼠標滑過效果，在這裏就不一一敘述了，我做的在這基礎上還加了個小動畫，請看:
中間的小心心會跳喔，想要源碼的，可以私我，送給你的小女友。 歡迎各位的欣賞，願疫情早日徹底結束。 逆戰的第27天。