理解CSS transform 3d变换

本篇文章中涉及到的一些概念，在上篇文章中已有介绍：理解CSS transform 2d变换

示例效果

坐标轴

3d变换是建立在三维坐标轴上，它比二维变换多了一个z轴。写代码的时候，眼睛与电脑的距离就是z轴，下面的图介绍了三维坐标：

perspective透视

在3d变换中，只有设置了透视才能观察到变换的效果，如果不设置透视，浏览器会将2d变换效果垂直投射到2d平面上，元素看起来只是大小变了，没有立体的效果。

上面的三个图片，图1是默认样子，图2是沿x轴顺指针旋转45deg后的设置透视的效果，图3是沿x轴顺指针旋转45deg没设置透视的效果

关于透视，需要了解观察者、被透视元素和变形元素三个概念：

变形元素：变形元素就是进行3d变形的元素。上图中的浅绿色盒子就是变形元素。

被透视元素：被透视元素就是被观察者观察的元素。上图中黄色的盒子就是被透视元素，一般被透视元素是变形元素的父级或祖先元素，当然被透视元素也可以是变形元素本身。

观察者：观察者是浏览器模拟出的用来观察被透视元素的一个没有尺寸的点。面对电脑写代码时，眼睛就是观察者。

透视距离

透视距离（视距）就是观察者沿着平行于z轴的视线与屏幕之间的距离。面对电脑写代码时人眼与屏幕的垂直距离即视距。

语法：perspective: none | length

perspective初始值none，属性值不能为0和负数，因为当人的眼睛贴到电脑屏幕上或者在电脑屏幕后面进行观察时是看不到屏幕正面的；属性值不能是百分比，因为没有可以参考的对象。

当人眼距离屏幕越近，看到的屏幕越大，越远越小，所以perspective的值越大，3d效果越不明显，越小越明显。一般透视属性设置在变形元素的父级或祖父级，因为浏览器会为其子元素产生透视效果而不会为其自身产生透视效果。

<div class="box" style="perspective: 500px">
<div class="t t1"></div>
</div>

<div class="box">
<div class="t t2" style="perspective: 500px"></div>
</div>

结果：

透视原点

perspective-origin透视原点指观察者的位置，一般地，观察者位于与屏幕平行的另一个平面上，观察者始终是与屏幕垂直的。观察者的活动区域是被观察元素的盒模型区域。用电脑屏幕的例子说明，人眼观察电脑屏幕时，眼睛的可活动区域就是一个与电脑屏幕一样大且平行于电脑屏幕的区域

语法：perspective-origin: x y;

x: left | right | center | <percentage> | <length>
y: top | bottom | center | <percentage> | <length>

默认值50% 50%即中心点位置，关键字是百分比的特殊表现形式。当属性值为数值时，x表示观察者在x轴上距离0点的偏移量，y表示在y轴上距离0点的偏移量；当属性值为百分比时，x是相对于被透视元素的宽度，y是相对于被透视元素的高度(宽高包括元素的padding和border)。

当只有一个值时，第二个值默认是center。

perspective-origin属性要设置在被透视元素上，所以要设置在变形元素的父级或祖父级才会有效果。

3d位移

和3d位移相关的函数有translateZ(z)和translate3d(x, y, z)，translateZ的属性值只能是长度值，不能是百分比，translateZ(z)相当于translate3d(0, 0, z)。

例3演示了位移效果，元素看起来整体缩小了

3d缩放

和3d缩放相关的函数有scaleZ(z)和scale3d(x, y, z)，默认值scale3d(1,1,1)，scaleZ(z)相当于scale3d(1,1,z)，单独使用scaleZ()或scale3d()时是观察不到z轴的缩放效果的。

例4演示了缩放效果：

3d旋转

transform: scaleZ(3) translateZ(-100px);相当于transform: translateZ(-300px);

和3d旋转相关的函数有rotateX(ndeg)、rotateY(ndeg)、rotateZ(ndeg)和rotate3d(x,y,z, ndeg)，变形元素沿着由(0,0,0)和(x,y,z)两点构成的直线为轴进行旋转，n为正数时顺时针旋转，n为负数时逆时针旋转。

rotateX(Ndeg)相当于rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相当于rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相当于rotate3d(0,0,1,Ndeg)

例5演示了旋转效果。

perspective透视函数

透视函数perspective()是transform变形函数的一个属性，应用变形元素本身。注意区分和perspective透视属性的区别，透视属性应用于变形元素的父级或祖父级，另外由于perspective-origin透视原点只能设置在透视属性的元素身上，所以如果为变形元素应用了透视函数，透视原点将不起作用，观察者使用默认位置，即元素中心点对应的平面。

透视函数的属性值只能为长度值，长度值只能是正数。由于transform是从前到后解析属性值的，所以要把透视函数放在其他变形函数前面才会有效果。

例6演示了透视函数

变形原点

当变形元素处于3d空间时，3d变形原点才会有作用，变形原点即元素变形时所依赖的基点。transform-origin: x,y,z，默认值50% 50%，z轴的属性值只能是长度值，x轴和y轴可以是长度值或百分比或关键字。

x轴: left | center | right | <length> | <percentage>
y轴: top | center | bottom | <length> | <percentage>
z轴: <length>

例7演示了效果

backface-visibility背景可见

backface-visibility定义元素背面是可见，默认值visible背面可见，属性值hidden背面不可见。在旋转元素不希望看到背面时，该属性很有用。

例7和例8把元素沿着y轴旋转了180度，例7的背面可见，例8背面不可见

transform-style变形风格

transform-style规定如何在3d空间中显示被嵌套的元素，必须和transform属性一起使用，默认值flat，子元素不保留3d位置；属性值 preserve-3d子元素保留3d位置

当设置了overflow属性值非visible，或者clip属性值非auto时，preserve-3d将失效

例9和例10演示了效果