先看效果
3d变换#container {
perspective: 1600px;
position: relative;
width: 1000px;
height:800px;
border: 1px solid #f00;
margin: 30px auto;
}
#content,#content1{
transform-style: preserve-3d;
width: 200px;
height:100px;
position: absolute;
left:50%;
top: 50%;
margin: -50px 0 0 -100px;
}
#content img,#content1 img{
position: absolute;
transition: all 1s;
}
var container=document.getElementById('container');
var content=document.getElementById('content');//此容器将做垂直方向的旋转
var content1=document.getElementById('content1');//此容器将做水平方向的旋转
var imgs=content.getElementsByTagName('img');
var imgs1=content1.getElementsByTagName('img');
//首张图片旋转角度,和每张图片相隔的角度:
var firstdeg= 0,rotatedeg=360/imgs.length,rotatedeg1=360/imgs1.length;
var speed=0,speed1=0;
//主要的功能函数:
var transformStar=function (firstdeg,imgs,imgwidth,imgheight,imgmargin,vertical){
var l=imgs.length;
var direct=vertical ? "rotateX" : "rotateY";
var x=vertical ? imgheight : imgwidth;
var radius=x/(Math.tan(Math.PI/l)*2)+imgmargin+"px";//计算出图片距离旋转中心的垂直距离
for (var i= 0;i
imgs[i].style.width=imgwidth+"px";
imgs[i].style.height=imgheight+"px";
imgs[i].style['transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
imgs[i].style['-webkit-transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
imgs[i].style['-moz-transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
imgs[i].style['-o-transform']=direct+'('+(i*(360/l)+firstdeg)+'deg'+')'+'translateZ('+radius+')';
}
};
transformStar(firstdeg,imgs,180,140,50,true);//垂直旋转的容器的初始状态
transformStar(firstdeg,imgs1,180,140,80,false);//水平旋转的容器的初始状态
//添加定时器使自动旋转:
var timer;
function autoRotate(){
clearTimeout(timer);
speed+=rotatedeg;//使第一张图片的旋转角度每次加一个值(各个图片相隔的角度)
speed1+=rotatedeg1;
transformStar(speed,imgs,180,140,50,true);
transformStar(speed1,imgs1,180,140,50,false);
timer=setTimeout(autoRotate,1000);
}
timer=setTimeout(autoRotate,1000);
//终止定时器的函数:
function stopAutoRotate(){
clearTimeout(timer);
}
//开启定时器的函数:
function startAutoRotate(){
timer=setTimeout(autoRotate,1000);
}
container.addEventListener('mouseover',stopAutoRotate,false);//鼠标移入停止自动旋转
container.addEventListener('mouseout',startAutoRotate,false);
//添加点击事件实现手动旋转:
container.addEventListener('click',rotateStar,false);
function rotateStar(e){
var e=e||window.event;
var contwidth=this.offsetWidth;
var deg=e.offsetX>=contwidth/2 ? rotatedeg : -rotatedeg;//判断鼠标点击的位置以决定转动的方向
var deg1=e.offsetX>=contwidth/2 ? rotatedeg1 : -rotatedeg1;
speed+=deg;
speed1+=deg1;
transformStar(speed,imgs,180,140,50,true);
transformStar(speed1,imgs1,180,140,50,false);
}