教你零基礎製作3D盒子相冊（送給那個她~）

3D立體相冊？
　　是的，相信大家或多或少的會在一些地方看到某些程序員用代碼給自己女朋友寫3D立體相冊，那麼你會不會也想自己手動敲出那些炫酷的代碼呢？
　　那你是找對地方了。廢話不多說，今天爲大家分享利用html實現3D盒子效果。不用怕，不需要什麼軟件的，只需要一個電腦和，一隻手！

2
　　首先先建一個空的文件夾，名字任意。如圖
　　　
2
　　在該文件夾中，再創建一個文件夾，用來存放要使用的圖片，同級目錄下還需創建兩個text文檔，注意：需要將文檔後綴名改爲html和css（由於html是用於web即網頁開發的，所以更改文檔後綴名後顯示的是網站圖標。），這點很重要.如圖

3
　　將需要使用的圖片放入保存圖片的文件夾，最好將圖片標號1~~6和01_{06，和一個背景圖片，方便寫代碼時調用（當然，不嫌麻煩也就隨便了），其中，1}_{6的圖修爲100x100大小的，01}~06的修爲400x400大小的。（可以使用網頁版美圖秀秀——>傳送門）如圖

4
　　然後在之前創好的html文檔，右擊編輯，進入編輯頁面，複製以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D相冊盒子版</title>
	<link type="text/css" href="逼格.css" rel="stylesheet" />
    <style type="text/css">
		body{background-image: url("./image/background.png");background-size: 100% 100%;background-attachment: fixed;}
	</style>
</head>
	<body>
		<div class="box">
			<ul class="minbox">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ol class="maxbox">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</body>
</html>

5
　　然後在之前創好的css文檔(最好也命名爲css），右擊編輯，進入編輯頁面，複製以下代碼：

@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;
}
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;
}
.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(./image/01.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(./image/02.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(./image/03.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(./image/04.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(./image/05.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(./image/06.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(./image/1.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(./image/2.jpg) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(./image/3.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(./image/4.jpg) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(./image/5.jpg) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(./image/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: -30px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
.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: -30px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -30px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

5
　　最後，只需要將代碼塊的部分修改一下：
　　1.將css代碼中的“這個文件夾用來放圖片”改爲你創建的時候命的名（如：image）。
　　如圖
　　
6
　　最後保存退出，然後雙擊該html即可成功！！！

參考鏈接：傳送門

後言
　　學到這裏，還不趕緊去嘗試嘗試，去給你的那個她來一份驚喜吧！
　　html,css等對於未學習過的人來說就是一潭深水，它的效果可以很強，由於我也只是一個萌新，所以可能並沒有別的3D相冊炫酷。如果有興趣的，可以去學習一下！如有問題，歡迎留言~~ 排版不易，喜歡的請點贊分享啊！！

教你零基礎製作3D盒子相冊（送給那個她~）

細談typedef和define的區別

深析超市商品管理系統設計

哈工大C語言程序設計精髓第七週

你真的瞭解String與StringBuffer的區別嗎

哈工大C語言程序設計精髓第六週

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結