<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #29454d;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
overflow: hidden;
}
.box {
position: relative;
height: 500px;
width: 500px;
margin: 100px auto;
transform-style: preserve-3d;
perspective: 2000px;
}
.di {
position: absolute;
left: 50%;
top: 50%;
height: 200px;
width: 200px;
transform: translate(-50%, -50%) rotatex(90deg);
transform-style: preserve-3d;
}
.z {
position: relative;
height: 200px;
width: 200px;
border-radius: 50%;
transform-style: preserve-3d;
}
p {
margin: 0;
position: absolute;
top: 0;
left: 25px;
height: 200px;
width: 150px;
border: 2px solid #fd7068;
box-sizing: border-box;
background-color: #ffffff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-size: 10px;
line-height: 200px;
text-align: center;
-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));
}
</style>
</head>
<body>
<div>
<div>
<div>
<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
() {
setPs();
move();
drop();
}
function
setPs() {
var
ps = document.getElementsByTagName('p');
for
(
var
i = 0; i < ps.length; i++) {
ps[i].style.transform = 'rotatex(-90deg) rotatey(' + i * 30 + 'deg) translatez(400px)'
}
}
function
move() {
var
zBox = document.querySelector('.z');
var
xBox = document.querySelector('.di');
var
speedTimer = null;
var
speedX = 0;
var
speedY = 0;
var
xDegNow = 90;
var
zDegNow = 0;
var
xDegDistance = 0;
var
zDegDistance = 0;
var
isMove = false;
window.onmousedown =
function
(e) {
xBox.style.transition = '';
zBox.style.transition = '';
var
xstart = e.clientX;
var
speedX_start = xstart;
var
ystart = e.clientY;
var
speedY_start = ystart;
var
tstart =
new
Date
().getTime();
var
tnow = tstart;
speedTimer = setInterval(
function
() {
tnow =
new
Date
().getTime();
},10)
window.onmousemove =
function
(e) {
isMove = true;
var
xnow = e.clientX;
var
ynow = e.clientY;
var
xDistance = xnow - xstart;
var
yDistance = ynow - ystart;
if
(tnow - tstart >= 10) {
speedX = (xnow - speedX_start) / (tnow - tstart);
speedY = (ynow - speedY_start) / (tnow - tstart);
tstart = tnow;
speedX_start = xnow;
speedY_start = ynow;
}
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) {
clearTimeout(speedTimer);
window.onmousemove = null;
if
(isMove) {
xBox.style.transition = 'all 0.5s ease-out';
zBox.style.transition = 'all 0.5s ease-out';
zDegDistance = zDegDistance - (speedX * 10);
zBox.style.transform = 'rotatez(' + zDegDistance + 'deg)';
xDegDistance = xDegDistance - (speedY * 10);
xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;
xBox.style.transform = 'translate(-50%,-50%) rotatex(' + xDegDistance + 'deg)';
xDegNow = xDegDistance;
zDegNow = zDegDistance;
isMove = false;
speedX = 0;
speedY = 0;
xDegDistance = 0;
zDegDistance = 0;
}
};
}
function
drop() {
window.ondragover =
function
(e) {
e.preventDefault();
}
window.ondrop =
function
(e) {
e.preventDefault();
}
var
ps = document.getElementsByTagName('p');
for
(
var
i = 0; i < ps.length; i++) {
ps[i].index = i;
ps[i].ondrop =
function
(e) {
var
w =
new
FileReader();
w.index = this.index;
w.readAsDataURL(e.dataTransfer.files[0]);
w.onload =
function
() {
ps[this.index].style.backgroundImage = 'url(' + w.result + ')';
ps[this.index].innerHTML = '';
}
}
}
}
</script>
</body>
</html>