<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3d变换</title> <style> #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; } </style> </head> <body> <div id="container"> <div id="content"><!--垂直旋转的容器--> <img src="img/img1.jpg"> <img src="img/img2.jpg"> <img src="img/img3.jpg"> <img src="img/img4.jpg"> <img src="img/img5.jpg"> <img src="img/img6.jpg"> <img src="img/img7.jpg"> <img src="img/img8.jpg"> <img src="img/img9.jpg"> <img src="img/10.jpg"/> <img src="img/11.jpg"/> <img src="img/12.jpg"/> <img src="img/13.jpg"/> <img src="img/14.jpg"/> </div> <div id="content1"><!--水平旋转的容器--> <img src="img/img1.jpg"> <img src="img/img2.jpg"> <img src="img/img3.jpg"> <img src="img/img4.jpg"> <img src="img/img5.jpg"> <img src="img/img6.jpg"> <img src="img/img7.jpg"> <img src="img/img8.jpg"> <img src="img/img9.jpg"> <img src="img/10.jpg"/> <img src="img/11.jpg"/> </div> </div> </body> </html>
<noscript>您的浏览器未启用JavaScript或不支持JavaScript</noscript> <script> 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<l;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); } </script>