前言：
生活處處驚喜，是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇文章就分享下前端代碼如何實現(xiàn)3D立體動態(tài)相冊。趕緊學會了，來制作屬于我們程序員的浪漫吧！先上效果圖，來引起下你們的興趣。
正文：
一、新建一個index.html的文件，代碼如下
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Bubbles (CodePen Circles Challenge)</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src='js/three.min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/dat.gui.min.js'></script>
<script src='js/randomColor.min.js'></script>
<script src='js/OrbitControls.js'></script>
<script src="js/index.js"></script>
</body>
</html>
二、css樣式的代碼
html,
body {
? margin: 0;
? padding: 0;
? width: 100%;
? height: 100%;
}
canvas {
? position: fixed;
? width: 100%;
? height: 100%;
}
二、css樣式的代碼
@charset "utf-8";
*{
margin:0;
padding:0;
}
body{
/*background: url(../img/preview.png) ;*/
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(../img/01.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
background: url(../img/02.png) no-repeat 0 0;
-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
background: url(../img/03.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
background: url(../img/04.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
background: url(../img/05.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
background: url(../img/06.png) no-repeat 0 0;
-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
background: url(../img/1.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
background: url(../img/2.png) no-repeat 0 0;
-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
background: url(../img/3.png) no-repeat 0 0;
-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
background: url(../img/4.png) no-repeat 0 0;
-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
background: url(../img/5.png) no-repeat 0 0;
-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
background: url(../img/6.png) 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);
}
}
三、文件的目錄結構，把css文件放到css文件夾里，圖片放到img文件夾里。
四、圖片尺寸不會修改的，可以選擇使用美圖秀秀網(wǎng)頁版很簡單
五、容易出現(xiàn)的問題?，圖片展示不全或展示的方向不對
1.圖片尺寸需要修改 （解決展示不全的情況）
上圖是我的圖片文件夾里放的圖片 ，首先01-06編號命名的圖片尺寸是100x100px的大小的，1-6編號是400x400px的大小，如果效果想展示最佳，100x100px的圖片是以頭部特寫的照片最好，因為01-06是立體照片內(nèi)部小正方體的照片，1-6編號是外部正方體的照片。
2.圖片的方向需要修改（解決頭朝下的問題）
修改的方向如上圖展示所示，比如第三張頭就應該朝下，否則形成的效果圖像會出現(xiàn)頭是倒著的情況。
六、放一下動態(tài)效果圖
總結：
?生活雖然總有辛酸，但是我們不應該減少去創(chuàng)造生活的樂趣，不斷尋找屬于自己的那份快樂，才應該是我們生活的態(tài)度。如果是非技術的朋友看到這篇博客，發(fā)現(xiàn)不會弄，可以直接留言要代碼包，自己替換下圖片就可以啦。
我是小默，一名喜歡分享知識的程序員，時不時的也會荒腔走板的聊一聊電影、電視劇、音樂、漫畫，這里已經(jīng)有723位小伙伴在等你們啦，感興趣的就趕緊來點擊關注我把，哪里有不明白或有不同觀點的地方歡迎留言！
關注公眾號：編程教學，? ?即可領取代碼
