<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3DAlbum</title>
<style>
html,body{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
background-color: #99cccc;
}
.album{
perspective: 800px;
}
.album .photos{
position: relative;
width: 133px;
height: 220px;
margin: 150px auto;
transform-style: preserve-3d; /*设置3d风格*/
transform: rotateX(-10deg) rotateY(0deg);
}
.album .photos .photo{
display: inline-block;
position: absolute;
width: 133px;
height: 200px;
border: 1px solid #fff;
background-color: #ccccff;
transition: 1s;
}
</style>
</head>
<body >
<div class="album">
<div class="photos">
<!-- 用div元素模仿照片 -->
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>
</div>
</div>
</body>
<script>
var photos = document.querySelector(".photos");
var photo = photos.querySelectorAll(".photo");
var deg = 360/photo.length;
window.onload = function(){
for(var i=0;i<photo.length;i++){
photo[i].style.transform = "rotateY("+deg*i+"deg) translateZ(350px)";
//为每张图片设置延时,最后一张第一个出现
photo[i].style.transition = "1s "+(photo.length-i)*0.1+"s";
}
}
document.onmousedown = function(e){
ox = e.clientX, //鼠标按下的坐标X
oy = e.clientY, //鼠标按下的坐标Y
rx = -10, //赋给roteteX的初始值
ry = 0; //赋给rotateY的初始值
this.onmousemove = function(e){
nx = e.clientX, //鼠标拖动时的坐标X
ny = e.clientY, //鼠标拖动时的坐标Y
x = nx - ox, //新旧坐标的差值
y = ny - oy;
rx -= y * 0.2,
ry += x * 0.2;
photos.style.transform = "rotateX("+rx+"deg) rotateY("+ry+"deg)";
ox = nx; //新值变旧值
oy = ny;
}
this.onmouseup = function(){
//减速
var timer = setInterval(function(){
x *= 0.8;
y *= 0.8;
rx -= y * 0.2,
ry += x * 0.2;
photos.style.transform = "rotateX("+rx+"deg) rotateY("+ry+"deg)";
if(Math.abs(x)<0.1 && Math.abs(y)<0.1){
clearInterval(timer);
}
},13);
this.onmousemove = null;
}
}
</script>
</html>
效果截图:
用div元素模仿img元素,实现照片从中心依次旋出,画风有点丑,有点抽象,请见谅!