CSS3 3D Transformations
3D Transformations
在3D空间移动旋转，是个处理器密集型操作，不过多数浏览器已经实现了硬件加速，直接通过设备的图像芯片来处理，可以大胆使用而不必有太多性能担心。
3D手势图
在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外；这些方向都是0到正值的方向或者说是负值到正值的方向
元素本身其实还是只有两个坐标维度： X和Y；这里只是让它围绕三维空间移动或旋转
<div class="d3-parent">
<div class="d3-child">
<h2>The Book Of</h2>
<h1>CSS3</h1>
</div>
</div>
* 下文中的例子都是基于此HTML
The Transformation Functions
围绕某个坐标轴旋转(rotate)
语法如下：
E {
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle);
}
每个rotate()函数接受一个angle值，通常使用degree. 看下面这个例子，分别沿三个坐标轴旋转45度:
.trans-x { transform: rotateX(45deg); }
.trans-y { transform: rotateY(45deg); }
.trans-z { transform: rotateZ(45deg); }
效果图如下：
如果你想让一个元素围绕两个或三个坐标轴旋转，可以为元素同时使用多个rotate()函数:
E { transform: rotateX(angle) rotateY(angle) rotateZ(angle); }
OR
E { transform: rotate3d(x,y,z,angle); }
angle的值显而易见; 但是x, y, z不是那么简单，他们分别接受一个数值(number),用来计算矢量方向(direction vector)，矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点，元素围绕这条线旋转angle指定的值。
看下面的例子，分别沿三个不同的矢量方向旋转45度:
.trans-x { transform: rotate3d(1,1,0,45deg); }
.trans-y { transform: rotate3d(1,0,1,45deg); }
.trans-z { transform: rotate3d(0,10,10,45deg); }
效果图如下, 如果想像上面的旋转效果有困难，可以拿张银行卡按矢量方向旋转来看最终效果：
Perspective Function
E { transform: perspective(depth); }
depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值。
看下面的例子：
.trans-1 { transform: perspective(1000px) rotateX(30deg) rotateY(45deg); }
.trans-2 { transform: perspective(250px) rotateX(30deg) rotateY(45deg); }
.trans-3 { transform: perspective(150px) rotateX(30deg) rotateY(45deg); }
若使用perspective()函数，那么他必须被放置在transform属性的首位，如果放在其他函数之后，则会被忽略。
效果图如下，如果不设置perspective，使用默认值none，那么会看不到下图DIV边框扭曲的效果，就是说看到的边框的宽度都是一样的；如果设置了perspective，你会发现下图DIV边框宽度的微妙变化：
Translation Along the Aixs
translateZ(length)是3D Transformaton特有的，其他两个2D中就有.
E {
transform: translateX(length);
transform: translateY(length);
transform: translateZ(length);
}
看下面的例子:
trans-z1 { transform: translateZ(-40px); }
trans-z2 { transform: translateZ(40px); }
效果图如下：
同样有个translate3d()函数，是对translate()函数的扩展，语法如下：
E { transform: translate3d(translateX,translateY,translateZ); }
接受三个数值参数，比如：
E { transform: translate3d(0,100%,1em); }
Scaling
2D Transformations中有scale() scaleX() scaleY()三个函数，3D中又多了一个scaleZ(), 以及速写函数(shorthand function)scale3d()
E { transform: scaleZ(number); }
如果只设置scaleZ(2)，你会发现元素并没有被扩大或压缩，scaleZ(number)需要和translateZ(length)配合使用，number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩。
速写函数scale3d()语法：
E { transform: scale3d(scaleX,scaleY,scaleZ); }
看如下例子：
.trans-z1 { transform: scaleZ(2.5) translateZ(-10px); }
.trans-z2 { transform: scale3d(1.25,1.25,4) translateZ(10px); }
例1： 2.5 * -10px = -25px; 所以元素沿着Z轴向里移动25px.
例2： X和Y轴的值分别是1.25，那么X Y轴分别被拉长25%，为1表示保持原大小，不被拉长或压缩；Z轴为4，则 4 * 10px = 40px, 元素在Z轴上向外移动40PX；
效果图如下：
The Transformation Matrix
matrix3d()函数要比2D中的matrix()函数更复杂，他接受16个参数，语法如下：
E {
transform: matrix3d(
m01,m02,m03,m04,
m05,m06,m07,m08,
m09,m10,m11,m12,
m13,m14,m15,m16
);
}
此处放弃此函数，Let go... 如果你特别地感兴趣，参考这里
The perspective and perspective-origin Properties
perspective property
前面介绍了perspective(depth)函数，此处介绍具有相似功能的 perspective property.
E { perspective: depth; }
同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是，perspective属性是被用于元素的子元素，而不是元素本身；就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。
perspective-origin property
同perspective属性，也是设置在父元素上，对子元素起作用。 这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的。
E { perspective-origin: x-position y-position; }
x-position和y-position的值可以是关键字、百分比、长度值，默认是center center或50% 50%；
x-position关键字有：left right center
y-position关键字有：top bottom center
来看下面的例子：
.d3-parent { perspective: 200px; }
.d3-child { transform: rotateX(45deg) rotateZ(90deg); }
.trans-1 { perspective-origin: left center; }
.trans-2 { perspective-origin: 100% 100%; }
.trans-3 { perspective-origin: 75% 25%; }
效果如下图：
共四个元素，第一个没有设置perspective-origin属性，所以是默认值center center，后面三个分别对应.trans-1 .trans-2 .trans-3
The Transformation Origin
该属性设置一点，然后元素按照这个点来transform，具体是哪种transform，是由transform属性来确定的。
语法：
E { transform-origin: x y z; }
x y可以是关键字，长度，百分比，默认值是center center或50% 50%
z只能是一个长度值
x关键字有：left right center
y关键字有：top bottom center
来看下面的例子，你可以拿张银行卡，然后用左手的拇指和食指夹住卡片上的那个点，再旋转，找找感觉：
.d3-child { transform: rotateX(45deg) rotateZ(90deg); }
.trans-1 { transform-origin: 50% 0 0; }
.trans-2 { transform-origin: 50% 100% 0; }
.trans-3 { transform-origin: center bottom -50px; }
效果如下图：
共四个元素，第一个没有设置transform-origin属性，所以默认值是transform-origin: 50% 50% 0;
The transform-style Property
使用了3D Transform的元素，他的后代元素的所有transformation function默认都会被忽略，如果想让他们不被忽略，需要设置transform-style属性。
IE10和11不支持
语法：
E { transform-style: keyword; }
默认值是flat，还可设置为preserve-3d
来看下面的例子：
.trans-1 { transform-style: flat; }
.trans-2 { transform-style: preserve-3d; }
效果如下图：
Showing or Hiding the Backface
backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。
语法：
E { backface-visibility: keyword; }
keyword有两个值，hidden和visible，默认值是visible。
来看下面的例子：
.d3-child {
backface-visibility: visible;
transform: rotateY(180deg);
}
.bf-hidden { backface-visibility: hidden; }
效果如下图：
此文是对《The Book of CSS3 2nd edition》第13章的翻译、理解和归纳，方便以后查阅。
感谢其作者Peter Gasston !
