使用html css js實現3D相簿

使用html+css+js實現3d相簿，快來上傳的**吧

效果圖：

**如下，複製即可用：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>title
title
>
<
style
>
html,
body 
.box 
.di 
.z p 
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="di"
>
<
div 
class
="z"
>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
<
p>可以拖拽檔案進來
p>
div>
div>
div>
<
script
>
window.onload 
=function
()         
//給每個p標籤設定位置
function
setps() 
}//滑鼠拖動旋轉
function
move() ,10)
window.onmousemove 
=function
(e) 
//把滑鼠移動距離計算成角度後設定到頁面上
zdegdistance 
=zdegnow 
-(xdistance /10
);                zbox.style.transform ='
rotatez('+
zdegdistance +'
deg)';
xdegdistance 
=xdegnow 
-(ydistance /10
);                xdegdistance 
=xdegdistance 
>
179?
179: xdegdistance 
<1?
1: xdegdistance;
xbox.style.transform ='
translate(-50%,-50%) rotatex('+
xdegdistance +'
deg)';
};};
window.onmouseup 
=function
(e) };}
//滑鼠拖拽檔案
function
drop() 
window.ondrop 
=function
(e) 
//新增拖拽到p標籤的事件
varps 
=document.getelementsbytagname('p
');for(
vari =0
; i 
<
ps.length; i
++) }}
}script
>
body
>
html
>

2018-05-04 14:20

foryourfuture 閱讀(

...)

編輯收藏

iOS實現3D旋轉

最近看到了乙個3d旋轉的動畫，就想著自己去實現以下。那麼，接下來就通過這邊文章記錄以下學習過程，慢慢深入了解以下3d旋轉。一 如何旋轉 每個view都在系統的座標系中，就手機螢幕來說，左上角為 0 0 向右橫向的為x軸正方向，向下縱向的為y軸正方向，垂直於手機螢幕的方向既z軸方向。所以z軸的旋轉屬於...

css js實現3D盒子

話不多說，直接上 lang en charset utf 8 rel shortcut icon href fk.png css3d盒子title html box keyframes xuanzhuan 100 box div front back left right top bottom st...

UITableViewCell實現3D縮放動畫

gif效果圖 部分 import uikit class tableviewcontroller uitableviewcontroller mark table view data source override func tableview tableview uitableview,numbe...