html中图片旋转木马,css3的图片3D旋转图片旋转木马

先看效果

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;

}

您的浏览器未启用JavaScript或不支持JavaScript

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);

}