CSS3 3D transforms系列-3D旋转木马

1，html结构：

<section id="container">
    <div id="carousel">
        <figure>1</figure>
        <figure>2</figure>
        <figure>3</figure>
        <figure>4</figure>
        <figure>5</figure>
        <figure>6</figure>
        <figure>7</figure>
        <figure>8</figure>
        <figure>9</figure>
        <figure>10</figure>
    </div>
</section>

2，css基本样式

我们给#carousel中的每一个面设置一个20像素的间隙，可以通过left:10px和top:10px来实现它。这样，每一个main的有效宽度为112px

#container{perspective: 1000px;position: relative;left:200px;top:200px;width: 200px;height: 112px;}

#carousel{transform-style: preserve-3d;position: absolute;width: 200px;height: 100px; transition: all 4s;}

#carousel figure{width: 200px;height: 100px;border: 2px #000 solid;opacity: 0.8;text-align: center;display: block;
    font-size: 40px;color: #fff;line-height: 100px;position: absolute;top:10px;left:10px;}

3,接下来，我们要旋转每一个面，确定其位置。

#carousel中有10个面，如果整个旋转木马的面是平均分布的，那么每个面需要在上一个面的基础上多旋转36度（360 / 10）；

类似如下图所示算法：

tan(36/2) = (112px/2) / r

tan(18) =56px/r

r= 56/tan(18)

r= 173px;

/*10张图片，所以每张图片围绕Y轴旋转36度，然后让每个figure都离中心位置173px，173这个数字
是根据图片的宽度来的，具体算法是--图片宽度除以2，再除以tan(18),自己可以画张多边形研究一下*/

#carousel figure:nth-child(1){background-color: peru;transform: rotateX(0deg) translateZ(173px)}
#carousel figure:nth-child(2){background-color: palegoldenrod;transform: rotateX(36deg) translateZ(173px)}
#carousel figure:nth-child(3){background-color: palegreen;transform: rotateX(72deg) translateZ(173px)}
#carousel figure:nth-child(4){background-color: paleturquoise;transform: rotateX(108deg) translateZ(173px)}
#carousel figure:nth-child(5){background-color: palevioletred;transform: rotateX(144deg) translateZ(173px)}
#carousel figure:nth-child(6){background-color: papayawhip;transform: rotateX(180deg) translateZ(173px)}
#carousel figure:nth-child(7){background-color: plum;transform: rotateX(216deg) translateZ(173px)}
#carousel figure:nth-child(8){background-color: powderblue;transform: rotateX(252deg) translateZ(173px)}
#carousel figure:nth-child(9){background-color: deeppink;transform: rotateX(288deg) translateZ(173px)}
#carousel figure:nth-child(10){background-color: deepskyblue;transform: rotateX(324deg) translateZ(173px)}

4,旋转木马效果就是让carousel围绕x轴每次旋转36度

简单实例：鼠标移动旋转

$(function(){
var i = 0;
    $("#carousel").mousemove(function(){
        i++;
        $(this).css("transform","rotateX("+(i*36)+"deg)");
    });
})

x轴同理