下边是我写的3D旋转相册的代码(用jquery写的):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D相册 </title>
<style>
body{
background-color : #000;
}
img{
width: 110px;
height: 180px;
position: absolute;
box-shadow: 1px -1px 6px #666;
-webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba( 0,0,0,0.5));
transition: 0.5s;
}
#wrap{
width: 130px;
height: 180px;
margin: 350px auto;
transform-style: preserve-3d;
}
.yang{
height: 100px;
width: 100%;
}
p{
font-size: 100px;
color: red;
font-weight: 100;
text-align: center;
}
</style>
</head>
<body>
<div class="yang">
<p>
杨先生&陈户户
</p>
</div>
<div id="wrap">
<img src="images/01.jpg" alt="">
<img src="images/02.jpg" alt="">
<img src="images/03.jpg" alt="">
<img src="images/04.jpg" alt="">
<img src="images/05.jpg" alt="">
<img src="images/06.jpg" alt="">
<img src="images/07.jpg" alt="">
<img src="images/08.jpg" alt="">
</div>
<script src="jquery-1.11.3.js"></script>
<script>
window.onload = function(){
var imgs = document.getElementsByTagName("img");
var wrap = document.getElementById("wrap");
wrapMove();
imgMove();
function wrapMove(){
var deg = 0;
setInterval(function(){
wrap.style.transform = "rotateY("+deg+"deg)";
deg-=1;
},100)
}
function imgMove(){
var index = imgs.length;
var deg = Math.floor(360/imgs.length);
var temMove = setInterval(function(){
imgs [--index].style.transform = "rotateY("+(imgs.length - index)*deg+"deg) perspective(1500px) translateZ(500px)";
if(index<=0){
clearInterval(temMove);
}
},1000 )
}
}
</script>
</body>
</html>
下边是代码效果: