上一篇文章讲了利用css3制作3D图片爆炸效果，现在我们同样用css3制作3D图片环，我们先看一下实现的效果图：
刚加载出来时每张图片从中间旋转出来：
Paste_Image.png
旋转完成之后：
Paste_Image.png
还可以拖拽图片进行旋转！
我们先讲一下制作的思路：
首先这些图片都是有一个一个的li组成的，并且这些li都是js动态创建出来的（省事，不用一个个去写了它们的父级UL要开启3D模式（transform-style:preserve-3d），然后这些li围绕它的父级Z方向移动一段距离 并且各自旋转不同的角度，那么下面我们来看一下具体实现的代码：
代码中每一步都有具体的解释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
overflow:hidden;
}
body{
background:#000;
}
ul{
width:133px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin-left:-65px;
margin-top:-200px;
/*开启3D*/
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
/*给Ul加一个初始的角度方便看效果*/
transform:perspective(800px) rotateX(-10deg);
}
ul li{
list-style: none;
width: 100%;
height: 100%;
position: absolute;
left:0;
top:0;
background:url("img2/1.jpg");
/*图片一圈加阴影*/
box-shadow:0 0 10px #fff;
/*加圆角*/
border-radius:10px;
transform: rotateY(0deg) translateZ(0px);
/*给li加倒影*/
-webkit-box-reflect: below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.3));
}
</style>
<script>
document.addEventListener('DOMContentLoaded',function(){
var oUl=document.querySelector('#box');
//有多少张图片就定义多少
var N=11;
for(var i=0; i<N; i++){
var oLi=document.createElement('li');
//给每个li加背景图片
oLi.style.background='url("img2/'+(i+1)+'.jpg")';
oUl.appendChild(oLi);
//这里加封闭空间是因为for循坏里加定时器，定时器的i值不能用
(function(oLi,i){
//加定时器是因为在for循环里给每个li加延时效果不管用
setTimeout(function(){
//给每个li加旋转角度
oLi.style.WebkitTransform='rotateY('+(360/N*i)+'deg) translateZ(300px)';
//加过渡时间和延时时间从而加载的时候会出现发牌效果
oLi.style.WebkitTransition='1s all ease '+(N-i)*200+'ms';
},0);
})(oLi,i);
}
var aLi=oUl.children;
//设置初始的x,y轴角度
var x=-10;
var y=0;
//拖拽转动
document.onmousedown=function(ev){
var oEvent=ev||event;
var disX=oEvent.clientX-y;
var disY=oEvent.clientY-x;
document.onmousemove=function(ev){
var oEvent=ev||event;
x=oEvent.clientY-disY;
y=oEvent.clientX-disX;
//纵向拖拽是改变的是oUl的X轴
oUl.style.WebkitTransform='perspective(800px) rotateX('+(-x)+'deg)';
for(var i=0; i<aLi.length; i++){
//横向拖拽是改变的是每个的Y轴 这里要注意要加上每个li的初始角度
aLi[i].style.WebkitTransform='rotateY('+(y+360/N*i)+'deg) translateZ(300px)';
//横向拖拽时不需要过渡时间直接干掉
aLi[i].style.WebkitTransition='none';
}
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
return false;
};
},false);
</script>
</head>
<body>
<ul id="box">
</ul>
</body>
</html>
网友评论