<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D</title>
</head>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
perspective: 1500px;
}
.images {
width: 100px;
height: 100px;
margin: 350px auto;
position: relative;
transform: rotateX(-20deg);
transform-style: preserve-3d;/*切换 3D 效果*/
}
.images img {
position: absolute;
box-shadow: 0 0 8px #eee;
}
</style>
<body>
<div class="container">
<div id="wrap" class="images">
<img src="3Dimg/thumb1.jpg">
<img src="3Dimg/thumb2.jpg">
<img src="3Dimg/thumb3.jpg">
<img src="3Dimg/thumb4.jpg">
<img src="3Dimg/thumb5.jpg">
<img src="3Dimg/thumb6.jpg">
<img src="3Dimg/thumb7.jpg">
<img src="3Dimg/thumb8.jpg">
<img src="3Dimg/thumb9.jpg">
<img src="3Dimg/thumb10.jpg">
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function() {
var wrap = document.getElementById("wrap");
var images = document.getElementsByTagName("img");
var length = images.length;
var deg = 360 / length;
for (var i = 0; i < length; i++) {
images[i].style.transform = "rotateY(" + deg * i + "deg) translateZ(240px)";
images[length - i - 1].style.transition = "1s " + 0.2 * i + "s";
}
// 点击坐标
var clickX, clickY;
// 移动坐标
var moveX, moveY;
// 移动距离坐标
var minusX, minusY;
// 旋转角度
var rotateX = 0,
rotateY = -20;
var timer = null;
// 鼠标按下事件
document.onmousedown = function(e) {
clickX = e.clientX;
clickY = e.clientY;
// 鼠标移动
this.onmousemove = function(e) {
moveX = e.clientX;
moveY = e.clientY;
// 移动距离
minusX = moveX - clickX;
minusY = moveY - clickY;
// 旋转角度，避免旋转太快故* 0.1
rotateX += minusX * 0.1;
rotateY -= minusY * 0.1;
// 中心轴旋转
wrap.style.transform = "rotateX(" + rotateY + "deg) rotateY(" + rotateX + "deg)"
clickX = moveX;
clickY = moveY;
}
// 鼠标释放
this.onmouseup = function() {
this.onmousemove = null;
// 旋转惯性
timer = setInterval(function() {
minusX *= 0.99;
minusY *= 0.98;
// 旋转角度
rotateX += minusX * 0.2;
rotateY -= minusY * 0.1;
// 中心轴旋转
wrap.style.transform = 'rotateX(' + rotateY + 'deg) rotateY(' + rotateX + 'deg) ';
if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
clearInterval(timer);
}
}, 10);
}
}
}
</script>
</html>