自己制作好看的炫酷的3D桌面背景，複制替換即可。
可用鼠标任意調整角度
1.首先創建一個.html文件，再複制文章結尾的代碼進去。
2.創建images文件夾存放圖片，如圖：
3.放入自己需要的照片進去，修改照片名稱或者修改代碼裡面的圖片名稱一一對應，可添加一個或者多個。少了多增加一個<img src='images/11.jpg' width='133' height='200' alt='#'>，多了删除。
4.調整width 或者 heigh可以調整寬度和高度，src 是圖片路徑（要能找到圖片哦）。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
*{margin:0;padding:0}
body{
background:#222;
overflow:hidden;
user-select:none; /*禁止選中*/
}
.perspective{
perspective:800px; /*3d景深*/
}
.wrap{
transform-style:preserve-3d;
width:120px;
height:180px;
margin:100px auto;
position:relative;
transform:rotateX(-10deg) rotateY(0deg);
}
.wrap img{
display:block;
position:absolute;
width:100%;
height:100%;
transform: rotateY(0deg) translateZ(0px);
padding:10px;
background:transparent;
box-shadow: 0 0 4px #fff; /*水平位移 垂直位移 擴散程度 顔色*/
border-radius:5px; /*圓角*/
-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%, rgba(0,0,0,.5) 100%); /*倒影 倒影模式 直徑*/
}
.wrap p{
width:1200px;
height:1200px;
background:-webkit-radial-gradient(center center ,600px 600px, rgba(122,122,122,0.5),rgba(0,0,0,0));
position:absolute;
border-radius:50%;
left:50%;
top:100%;
margin-left:-600px;
margin-top:-600px;
transform:rotateX(90deg); /*沿着x軸方向摁倒*/
}
</style>
<title>3d場景照片牆</title>
</head>
<body>
<div class='perspective'>
<div class='wrap'>
<img src='images/1.jpg' width='133' height='200' alt='#'>
<img src='images/2.jpg' width='133' height='200' alt='#'>
<img src='images/3.jpg' width='133' height='200' alt='#'>
<img src='images/4.jpg' width='133' height='200' alt='#'>
<img src='images/5.jpg' width='133' height='200' alt='#'>
<img src='images/6.jpg' width='133' height='200' alt='#'>
<img src='images/7.jpg' width='133' height='200' alt='#'>
<img src='images/8.jpg' width='133' height='200' alt='#'>
<img src='images/9.jpg' width='133' height='200' alt='#'>
<img src='images/10.jpg' width='133' height='200' alt='#'>
<img src='images/11.jpg' width='133' height='200' alt='#'>
<p></p>
</div>
</div>
<script>
/*誰 觸發了什麼事件 誰做了什麼*/
window.onload=function(){ /*頁面加載完成*/
/*最新的原生獲取元素方法querySelectorAll*/
var oImg=document.querySelectorAll('img');
var oWrap=document.querySelector('.wrap');
var lastX,lastY,nowX,nowY,minusX,minusY,roY=0,roX=-10;
var timer=null;
/*計算每一個圖片的角度 總角度(360) / 數量(11) = 單位角度*/
var length=oImg.length; /*獲取img的數量 統稱為長度*/
var Deg=360/length; /*單位角度*/
for(var i=0;i<length;i ){
oImg[i].style.transform='rotateY(' i*Deg 'deg) translateZ(350px)';
oImg[i].style.transition='transform 1s ' (length-1-i)*0.2 's'
}
mTop();
window.onresize=mTop;
function mTop(){
/*獲取浏覽器窗口可視高度*/
var wH=document.documentElement.clientHeight||document.body.clientHeight;
oWrap.style.marginTop=(wH/2)-oWrap.offsetHeight 'px';
}
/*拖拽drag 按下 onmousedown 移動 onmousemove 擡起 onmouseup */
document.onmousedown=function(event){ /*按下鼠标開始準備拖拽*/
event=event||window.event; /*處理兼容性*/
lastX=event.clientX; /*鼠标拖拽開始時的x坐标*/
lastY=event.clientY; /*鼠标拖拽開始時的Y坐标*/
clearInterval(timer);
document.onmousemove=function(event){
event=event||window.event;
nowX=event.clientX; /*鼠标移動時的x坐标*/
nowY=event.clientY; /*鼠标移動時的y坐标*/
minusX=nowX-lastX; /*獲取鼠标移動距離*/
minusY=nowY-lastY; /*獲取鼠标移動距離*/
roY =minusX*0.2; /*通過移動量計算旋轉角度*/
roX-=minusY*0.1; /*通過移動量計算旋轉角度*/
oWrap.style.transform='rotateX(' roX 'deg) rotateY(' roY 'deg)'
lastX=nowX; /*更新初始位置保證 lastX 跟得上鼠标*/
lastY=nowY; /*更新初始位置保證 lastY */
}
document.onmouseup=function(){
document.onmousemove=null;
timer=setInterval(function(){
/*給一個摩擦系數,每一次定時器觸發都慢一點點*/
minusX*=0.9;
minusY*=0.9;
roY =minusX*0.2; /*通過移動量計算旋轉角度*/
roX-=minusY*0.1; /*通過移動量計算旋轉角度*/
oWrap.style.transform='rotateX(' roX 'deg) rotateY(' roY 'deg)';
if(Math.abs(minusX)<0.1&&Math.abs(minusY)<0.1){
/*當移動向量過小的時候終止定時器停止慣性*/
clearInterval(timer);
}
},13);
}
return false;
}
}
</script>
</body>
</html>
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
