CSS3D动画

1.所有的3D变换都是基于这张图的

Paste_Image.png

2.三个变换

rotateX( angle )
rotateY( angle )
rotateZ( angle )

Paste_Image.png

3.perspective属性

CSS3 3D transform的透视点是在浏览器的前方！
或者这么理解吧：显示器中3D效果元素的透视点在显示器的上方（不是后面），近似就是我们眼睛所在方位！

Paste_Image.png

4.translateZ帮你寻找透视位置

比如，父元素设置

perspective: 201px;

则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。

Paste_Image.png

Paste_Image.png

Paste_Image.png

4.perspective属性的两种书写

perspective
属性有两种书写形式，一种用在舞台元素上（动画元素们的共同父辈元素）；第二种就是用在当前动画元素上，与transform的其他属性写在一起。如下代码示例：

.stage {
    perspective: 600px;
}

另一种

#stage .box {
    transform: perspective(600px) rotateY(45deg);
}

Paste_Image.png

上面舞台整个作为透视元素，因此，显然，我们看到的每个子元素的形体都是不一样的；而下面，每个元素都有一个自己的视点，因此，显然，因为rotateY的角度是一样的，因此，看上去的效果也就一模一样了！

5.视点位置perspective-origin

Paste_Image.png

6.transform-style: preserve-3d

transform-style属性也是3D效果中经常使用的，其两个参数flat|preserve-3d. 前者flat为默认值，表示平面的；后者preserve-3d表示3D透视。
一般而言，该声明应用在3D变换的兄弟元素们的父元素上，也就是舞台元素。

7.backface-visibility

在CSS3的3D世界中，默认情况下，我们是可以看到背后的元素

backface-visibility:hidden;

8.demo

CSS3 transform实现图片旋转木马3D浏览效果实例页面

Paste_Image.png

(1)html结构

舞台
    容器
        图片
        图片
        图片
        ...

（2）对于舞台，很简单，加个视距，比方说800像素：

 perspective: 800px;

（3）对于容器，很简单，加个3D视图声明，如下：

transform-style: preserve-3d;

（4）为了不至于产生类似DNA的螺旋状效果，我们让所有图片position:absolute，公用同一个中心点。
因为要正好绕成一个圈，因此，图片rotateY
值正好0~360等分，于是，如果有9张图片，则每个图片的旋转角度累加40(360 / 9 = 40)度即可。因此有

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

Paste_Image.png

聪明的人应该已经知道了，就是本文提到的translateZ, 当translateZ为正值的时候，元素会向其面对的方向走去；如果元素无旋转，就会朝显示器走来！！
：9个美女，分别面朝东南西北共9个不同方位，她们只要每个人向前走个4_{5步，美女们之间的空间不久拉开了，呈现圆形了！想象一下夜空中，礼花绽开的场景}~

Paste_Image.png

计算公式

r = 64 / Math.tan(20 / 180 * Math.PI) ≈ 175.8

demo页面为了好看，图片之间留了点间距，使用的translateZ
的值为175.8 + 20 = 195.8
.

Paste_Image.png

转载：
http://www.zhangxinxu.com/wordpress/?p=2592