CSS3 3D变换

　　CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

　　x 轴即水平位置，左边是负的，右边是正的；

　 y 轴即垂直位置，上面是负的，下面是正的；

　 z 轴即视线到屏幕里面，屏幕里面的负的，外面是正的。

一、定义旋转

　　1、rotateX()

　　　　该函数指定一个元素围绕 X 轴旋转，旋转的量被定义为指定的角度。

　　　 语法格式：

rotateX(角度值);           // 单位是 deg

- 　　如果值为正值，元素围绕 X 轴顺时针旋转；
- 如果值为负值，元素围绕 X 轴逆时针旋转；

　　2、rotateY()

　　　　该函数指定一个元素围绕 Y 轴旋转，旋转的量被定义为指定的角度。

　　　 语法格式：

rotateY(角度值);           // 单位是 deg

- 　　如果值为正值，元素围绕 Y 轴顺时针旋转；
- 如果值为负值，元素围绕 Y 轴逆时针旋转；

　　3、rotateZ()

　　　　该函数指定一个元素围绕 Y 轴旋转，旋转的量被定义为指定的角度。

　　　语法格式：

rotateZ(角度值);             // 单位是 deg

- 如果值为正值，元素围绕 Z 轴顺时针旋转；
- 如果值为负值，元素围绕 Z 轴逆时针旋转；

　　Tips：该函数与 rotate() 效果等同，但不是在 2D 平面的旋转。

　　扩展：

　　在三维空间中，还有 rotate3d() 函数。在3D空间，旋转一个 [x，y，z] 向量并经过元素原点定义。

　　语法格式：

rotate3d（x,y,z）;

　 x：是一个0到1之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值；

- 　 y：是一个0到1之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值；
- z：是一个0到1之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值；

二、定义透视

　　1、perspective 属性

　　　　电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

　　　　透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

- 　透视原理：近大远小。
- 浏览器透视：把近大远小的所有图像，透视在屏幕上。
- perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

　　　　注意：并非任何情况下需要透视效果，根据开发需要进行设置。

　　　　perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素。

　　　　语法格式：

perspective: 单位值px;

　　　　理解透视距离原理：

　 2、perspective-origin 属性

　　　　该属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。

　　　　当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身。

　　　　注意：该属性必须与 perspective 属性一同使用，而且只影响 3D 转换元素。

　　　　Tips：目前浏览器都不支持 perspective-origin 属性。Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。

　　　　语法格式：

prespective: 数值1， 数值2；      // 可以使用百分比

　　3、transform-style 属性

　　　　该属性规定如何在 3D 空间中呈现子元素。

　　　注意：该属性必须与 transform 属性一同使用。

　　　语法格式：

transform-style: flat|preserve-3d;

- flat：子元素将不保留其 3D 位置。
- preserve-3d：子元素将保留其 3D 位置。子元素以 3D 形式呈现出来。

　　Demo:

 1    /*CSS 样式*/    
 2  　　<style type="text/css" media="screen">
 3         body {
 4             perspective: 1000px;
 5             perspective-origin: 50%;
 6         }
 7         section {
 8             width: 300px;
 9             height: 150px;
10             background-color: pink;
11             margin: 100px auto;
12             position: relative;
13             transform-style: preserve-3d;     /* 让父盒子里面的元素以 3D 效果展示*/
14             transition: all 5s linear;
15         }
16         section:hover {
17             transform: rotateY(360deg);
18         }
19         section div {
20             width: 100%;
21             height: 100%;
22             background-color: skyblue;
23             border: 1px solid #000;
24             position: absolute;
25             left: 0px;
26             top: 0;
27         }
28         section div:nth-child(1) {
29             transform: rotateY(0deg) translateZ(400px);
30         }
31         section div:nth-child(2) {
32             transform: rotateY(60deg) translateZ(400px);
33         }
34         section div:nth-child(3) {
35             transform: rotateY(120deg) translateZ(400px);
36         }
37         section div:nth-child(4) {
38             transform: rotateY(180deg) translateZ(400px);
39         }
40         section div:nth-child(5) {
41             transform: rotateY(240deg) translateZ(400px);
42         }
43         section div:nth-child(6) {
44             transform: rotateY(300deg) translateZ(400px);
45         }
46     </style>
47　　 <section>           <-- html 结构 -->
48         <div></div>
49         <div></div>
50         <div></div>
51         <div></div>
52         <div></div>
53         <div></div>
54     </section>

三、定义位移

　　1、translateX(x)

　　　　仅水平方向移动（X轴移动）

transform:translateX(距离值);

　　2、translateY(y)

　　　　仅垂直方向移动（Y轴移动）

transform:translateY(距离值);

　　3、translateZ(z)　

　　　　transformZ 的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了

　　4、translate3d(x,y,z)

　　　　[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

四、定义缩放

　　1、scaleZ()

　　　　语法格式：

scaleZ(s);

- 　　参数值 s 指定元素每个点在 Z 轴的比例。

　　2、scale3d()

　　　　该缩放函数，可以让元素在 Z 轴上按比例缩放，默认值为1，当值大于1时，元素方法，当值小于1大于0.01 时，元素缩小。

　　　　语法格式：

scale3d(sx,sy,sz);

- 　　sx：横向缩放比例；
- sy：纵向缩放比例；
- sz：Z 轴缩放比例；

五、backface-visibility

　　属性定义当元素不面向屏幕时是否可见。

　　即当元素倾斜超过 90 度之后，不是正面对着屏幕就隐藏该元素。

　　语法格式：

backface-visibility: hidden;     /* 不是正面对象屏幕，就隐藏 */