CSS3学习笔记--transform基于原始数据（旋转木马实例）

transform-style：preserve-3d属性要在图片所在的容器（父元素）中定义，perspective定义在父子元素上的效果不同。
对象的Z轴与其平面垂直，因此照片需要先旋转，再位移；否则所有照片都会挤到一起。
点击图片后，都要基于图片的原始顺序和位置进行transform计算。下面是旋转木马的javascript代码、HTML代码和CSS代码。

<script type="text/javascript">

    var count = 1;

    function rotateRound(){ //不管第几次点击，myCircle取出来的Img列表都是HTML中的原始顺序

        var myCircle = document.getElementById("circle").getElementsByTagName("img");

        var i;

        var myImg;

        for(i=0;i<myCircle.length;i++){

              myImg = myCircle[i];

              myImg.style.transform = "rotateY("+(i-count)*40+"deg) translateZ(300px)";  //每次transform都是基于原始位置，而不是当前视图显示的位置。

        }

        count++;

    };

</script>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>旋转木马</title>

<link rel="stylesheet" href="MerryGoRound.css" />

<script type="text/javascript">

    var count = 1;

    function rotateRound(){

        var myCircle = document.getElementById("circle").getElementsByTagName("img");

        var i;

        var myImg;

        for(i=0;i<myCircle.length;i++){

              myImg = myCircle[i];

              myImg.style.transform = "rotateY("+(i-count)*40+"deg) translateZ(300px)";

        }

        count++;

    };

</script>

</head>

<body>

    <section id="stage"><center>

    <div id="circle" onclick="rotateRound()">

        <img class="girls one" src="01.jpg" alt="Taboo" />

        <img class="girls two" src="02.jpg" alt="Taboo" />

        <img class="girls three" src="03.jpg" alt="Taboo" />

        <img class="girls four" src="04.jpg" alt="Taboo" />

        <img class="girls five" src="05.jpg" alt="Taboo" />

        <img class="girls six" src="06.jpg" alt="Taboo" />

        <img class="girls seven" src="07.jpg" alt="Taboo" />

        <img class="girls eight" src="08.jpg" alt="Taboo" />

        <img class="girls nine" src="09.jpg" alt="Taboo" />

    </div>

    </center></section>

</body>

/******************************CSS代码**********************************************/
#stage {

    width:auto;

    margin:50px 50px;

}

#circle {

    perspective:1200px;

    -moz-transform-style:preserve-3d;

}

.girls {

    width:200px;

    height:300px;

    position:absolute;

    -moz-transition:all 0.3s linear;

}

.one {

    -moz-transform:rotateY(0deg) translateZ(300px); 照片绕城柱形，像旋转木马一样

}

.two {

    -moz-transform:rotateY(40deg) translateZ(300px);

}

.three {

    -moz-transform:rotateY(80deg) translateZ(300px);

}

.four {

    -moz-transform:rotateY(120deg) translateZ(300px);

}

.five {

    -moz-transform:rotateY(160deg) translateZ(300px);

}

.six {

    -moz-transform:rotateY(200deg) translateZ(300px);

}

.seven {

    -moz-transform:rotateY(240deg) translateZ(300px);

}

.eight {

    -moz-transform:rotateY(280deg) translateZ(300px);

}

.nine {

    -moz-transform:rotateY(320deg) translateZ(300px);

}

巴特西

CSS3学习笔记--transform基于原始数据（旋转木马实例）

最新文章

热门文章