前言：
520快到了，是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就是演示給冰冰做一個前端3D旋轉相冊，學會的小伙伴可以給自己的女朋友或者喜歡的女生做一個，相比幾百上千的禮物，零成本的技術實現的3D選擇相冊又走心，還可以用來當壁紙，趕快先收藏起來！
正文：
一、新建一個index.html的文件，代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>css-3d旋轉</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <!--/*外層最大容器*/--> <div class="wrap"> <!-- /*包裹所有元素的容器*/--> <div class="cube"> <!--前面圖片 --> <div class="out_front"> <img src="img/1.jpg" class="pic"/> </div> <!--后面圖片 --> <div class="out_back"> <img src="img/2.jpg" class="pic"/> </div> <!--左圖片 --> <div class="out_left"> <img src="img/3.jpg" class="pic"/> </div> <div class="out_right"> <img src="img/4.jpg" class="pic"/> </div> <div class="out_top"> <img src="img/5.jpg" class="pic"/> </div> <div class="out_bottom"> <img src="img/6.jpg" class="pic"/> </div> <!--小正方體 --> <span class="in_front"> <img src="img/7.jpg" class="in_pic" /> </span> <span class="in_back"> <img src="img/8.jpg" class="in_pic" /> </span> <span class="in_left"> <img src="img/9.jpg" class="in_pic" /> </span> <span class="in_right"> <img src="img/10.jpg" class="in_pic" /> </span> <span class="in_top"> <img src="img/11.jpg" class="in_pic" /> </span> <span class="in_bottom"> <img src="img/12.jpg" class="in_pic" /> </span> </div> </div> </body> </html>
二、css樣式的代碼
html{
background: #000;
height: 100%;
}
/*最外層容器樣式*/
.wrap{
position: relative;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
/*改變左右上下,圖片方塊移動*/
}
/*包裹所有容器樣式*/
.cube{
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
-webkit-animation: rotate 20s infinite;
/*勻速*/
animation-timing-function: linear;
}
@-webkit-keyframes rotate{
from{transform: rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
.cube div{
position: absolute;
width: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定義所有圖片樣式*/
.pic{
width: 200px;
height: 200px;
}
.cube .out_front{
transform: rotateY(0deg) translateZ(100px);
}
.cube .out_back{
transform: translateZ(-100px) rotateY(180deg);
}
.cube .out_left{
transform: rotateY(90deg) translateZ(100px);
}
.cube .out_right{
transform: rotateY(-90deg) translateZ(100px);
}
.cube .out_top{
transform: rotateX(90deg) translateZ(100px);
}
.cube .out_bottom{
transform: rotateX(-90deg) translateZ(100px);
}
/*定義小正方體樣式*/
.cube span{
display: bloack;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic{
width: 100px;
height: 100px;
}
.cube .in_front{
transform: rotateY(0deg) translateZ(50px);
}
.cube .in_back{
transform: translateZ(-50px) rotateY(180deg);
}
.cube .in_left{
transform: rotateY(90deg) translateZ(50px);
}
.cube .in_right{
transform: rotateY(-90deg) translateZ(50px);
}
.cube .in_top{
transform: rotateX(90deg) translateZ(50px);
}
.cube .in_bottom{
transform: rotateX(-90deg) translateZ(50px);
}
/*鼠標移入后樣式*/
.cube:hover .out_front{
transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .out_back{
transform: translateZ(-200px) rotateY(180deg);
}
.cube:hover .out_left{
transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .out_right{
transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .out_top{
transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .out_bottom{
transform: rotateX(-90deg) translateZ(200px);
}
三、文件的目錄結構，把css文件放到css文件夾里，圖片放到img文件夾里。
四、圖片尺寸大小隨意【嚴格要求的話可以統一正方形尺寸大小】
五、最終動態效果圖呈現：
總結：
世界上沒有不存在漏洞的關系。在每種關系的開始，都有他存在的原因，而在結束時，也有必要終止他的生活。生命是可以隨時終止的契約，但是愛可以在最純凈最美好的時光穿越生死。
如果是非技術的朋友看到這篇博客，發現不會弄，可以直接留言要代碼包，自己替換下圖片就可以啦。
我是白雲，一名喜歡分享知識的程序員，感興趣的就趕緊來點擊關注我把，哪里有不明白或有不同觀點的地方歡迎留言！
關注評論代碼私信獲取！