【工科宅的520禮物系列】之零基礎小白手把手教零基礎小白製作3D立方相冊

村上春樹曾經說過：“如果一直想見誰，遲早肯定見得到。”
在週末，代碼小白一起來學習如何準備520這一天的禮物吧，奧利給！！！

準備工作

首先，我們要有一個文件框架，
css存放我們的代碼，img裏面存放我們製作相冊的素材，html文件點擊可以查看我們的最終效果。

html怎麼添加背景圖片

如何給我們的網頁增加一個背景圖片呢，首先要選擇一個合適大小的壁紙圖片存在img裏面。

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
        background: url(../img/bj.jpeg) no-repeat 0 0;
}

我們在這裏面更換背景。名字要和你所選擇的文件名稱對應。如果不想改代碼的話，就和我起一樣的名字用同一個格式就好啦。

  background: url(../img/bj.jpeg) no-repeat 0 0;

html基礎設置

li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}

我們的li標籤沒有文字，html中list-style: none;表示我們的list標籤前面沒有任何修飾。

在HTML中<li>標籤可以用來定義列表，
使用<li>標籤定義的列表可以是個無序列表(<ul>)也可以是有序列表(<ol>)。
<li> 標籤定義列表項目（li是lists的縮寫）
<li> 標籤可用在有序列表 (<ol>) 和無序列表 (<ul>)

box裏面是在設置我們的正方形邊框，大小爲$200\times200$像素的，position位置設定。其他的，小白也不會了，不過這並不影響下一步。我們的相冊是大立方體裏面嵌套小立方體。所以我們代碼有minbox,還有maxbox，在素材庫中，不同像素尺寸的照片用最好用不同的命名規則創建。大概，最繁瑣的環節就是素材庫的準備。如何獲得$400\times400$和$100\times100$像素大小的12個圖片，可以在網絡上找在線改圖軟件比如改圖寶。

內立方體的構建

我們運用相關旋轉平移變換知識來移動我們的素材。

.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}

通過HTML 3D Transform的學習，我們遵循的構建原則是前後上下左右的順序，。

外立方體的構建

.maxbox li:nth-child(1){
	background: url(../img/1.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}

.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}

最後，我們實現立方體的旋轉效果。

@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

作爲擁有有趣靈魂的工科生，我們的人生哲學是致力於把我們的技術照進現實，對接最平凡的生活並且給人以幸福。

最後的效果圖，哈哈哈，這是個全世界只有我自己知道的祕密，手動P圖片大小這真的很費時間，我纔沒有興趣特意找沒有意義的模板照片做重複工作。下面的是沒有處理好照片尺寸的效果。

人像照片處理好大小後大概的樣子可以參看如下鏈接。

參考資料

小炫酷的3D旋轉立方體相冊，總結了相關知識點，可以深入學習一下；
3d立方體旋轉相冊，只不過，這個沒有背景，不過，黑色效果也很好。
抖音上很火的3D立體動態相冊實現代碼!,本文主要學習的代碼是這個，相比較而言，比較簡單，容易實現。

殘留問題：圖片的旋轉遇到了錯誤。
哦哦哦，到了肥鼠路易看動畫片的時間了，推薦大家一起看《理科生墜入情網,故嘗試證明》

今日背景音樂張碧晨《我變了 我沒變》

天過一天 年復一年
我因爲愛 仍深陷
時如飛箭 境已變遷
你在心間 仍出現
夢魘 在夢魘 你走遠 越走越遠
改變 我改變 終不見 倒轉 時間
我做了那麼多改變
只是爲了我心中不變
默默地深愛着你
無論相見不相見
我做了那麼多改變
只是爲了我心中不變

村上春樹曾經說過：“如果一直想見誰，遲早肯定見得到。”但是他還說過：“所見之日乃是終止之時。”

所以，王爾德的那一句：“愛自己纔是終身浪漫的開始。”更應該被記得。