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

前面两个课程中我们分别制作了3D立方体和3D长方体，掌握了它们的制作方法说明你已经会使用CSS3 3D transforms了。下面我们接着来谈谈更为高级的内容-3D旋转木马。当谈到3D旋转木马，开发者可以有许多种方式来实现它，但既然浏览器有实现3D空间的能力，我们为何不试一试使用CSS来实现一个旋转的3D旋转木马效果呢？

3D旋转木马的HTML结构和立方体、长方体和卡片的HTML结构基本类似，只是面多了一些。我们这里使用9个面来制作旋转木马：

<section class="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>
  </div>
</section>                        
                            

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

.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

#carousel figure {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}
                    
                            

接下来，我们要旋转每一个面。#carousel中有9个面，如果整个旋转木马的面是平均分布的，那么每个面需要在上一个面的基础上多旋转40度（360 / 9）。

#carousel figure:nth-child(1) { transform: rotateY(   0deg ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ); }                       
                            

在接下来的事情就是移动中心点。当我们在制作立方体和长方体的时候，translate的值很容易计算出来，基本上是等于长度和宽度或者高度的一半。对于旋转木马，我们没有尺寸可以参考，我们需要计算出每一个面的移动距离。

我们可以在纸上画一个旋转木马的草图，可以看到，我们只知道两样东西：每一个面的宽度是210像素，每一个面要在上一个面的基础上多旋转40度。从俯视图往下看，它们有9个三角形组成。如果我们在其中一个三角形上沿中心垂线将它切开，可以得到一个直角三角形。

我们可以用一个基本的切线方程确定在该图中R的长度。

经过上面的计算我们可以得出结果：每一个面需要在3D空间中向外translate288像素。

#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }                              
                            

如果你改变了面的宽度或者数量，需要重新按照公式来计算translate的值。另一方面来说，我们只需要知道这两个值，就可以随意改变旋转木马的面的宽度和数量，可以使用js来动态计算它们：

var tz = Math.round( ( panelSize / 2 ) / 
  Math.tan( ( ( Math.PI * 2 ) / numberOfPanels ) / 2 ) );
// or simplified to
var tz = Math.round( ( panelSize / 2 ) / 
  Math.tan( Math.PI / numberOfPanels ) );                              
                            

和3D立方体和长方体一样，要显示其他的面，只需要改变transform的顺序即可：

transform: translateZ( -288px ) rotateY( -160deg );                              
                            

查看3D旋转木马-Carousel 1

学习到这里你可能觉得：

• 反复重写每一个面的transform样式是很无聊的事情。
• 制作旋转木马还要使用到高等数学的知识！ -_-!!

每错，我们可以将单调重复的transform样式交给脚本来完成，如果你的代码编写正确，将会比硬编码的版本更加灵活。

查看3D旋转木马-Carousel 2

CSS3 3D transforms系列教程：

1. Perspective
2. 3D transform 属性
3. 卡片翻转
4. 3D立方体
5. 3D长方体