css3的图片3D旋转图片旋转木马

先看效果

<!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>

css3的图片3D旋转图片旋转木马

猜你喜欢