时间：2021-07-01 10:21:17 帮助过：124人阅读
今天要介绍的是 CSS3 中的3D效果，以及非常新的透视功能。
CSS3 的3D效果是使用 transform 属性的 rotateX(Y, Z), translateX(Y, Z), scaleX(Y, Z)方法进行设置的。
一个元素如果进行3D变换，它在3D空间的初始位置是这样的：
// 下图有错，正在更改
上图使用了立方体来更好的说明位置，如果只是单单一个元素的话，它的形状是一个平面区域。
下面来分别介绍一下 transform 属性的3D相关方法。由于这些方法非常易于理解，所以我不赘述。
这个方法使得元素绕着X、Y或Z轴进行轴旋转，需要注意的是，所有的旋转都是已逆时针方向为正方向。
translateX 和 translateY 和2D空间的平移是一样的，重点说一下 translateZ。
由于默认开启的是平行投影，所以当你更改一个元素的Z值的时候，视觉上没有任何变化。如何开启透视投影？不急，先慢慢看，后面会介绍到。
在X、Y或Z轴上对图像进行缩放，不多说。
！这是一个非常重要的属性，值可以是：
flat(default)
preserve-3d
这里许许多多的文章都没有说清楚，不才在这里尝试解释一下。
设置了 preserve-3d 属性的元素会生成一个3D的空间，将所有的子元素（不是后代元素）都囊括在这个3D空间内。
对于父元素的 transform 属性，会应用到生成的3D空间中，对整个空间进行缩放，平移，旋转。
最后将所有的元素平行投影到屏幕上（不是父元素）。
请自己看上面的一段文字，如果能够理解，那么尝试分析 flat：
子元素并没有在父元素的3D空间内，它们独立的，各自做自己的3D变换，然后按照先后次序（即translateZ无效）投影到父元素（不是屏幕）上。
由于所有的子元素都投影到父元素上，那么父元素的 transform 属性在视觉效果上是对父元素这个平面区域进行的。
// DEMO：case1
通过这个DEMO我们可以看到 flat 和 preserve-3d 的区别，更加理解上面的文字。
transform: translateX(10px) rotateZ(90deg);
你以为是先平移10px再相对于以Z轴为旋转轴旋转90度吗？
其实并不是，tranform 的属性是从右边的方法依次应用到左边的方法的。
/*
* 中场休息: 先好好消化一下上面的内容吧！
*/
透视投影模拟人眼的图像观察方式，这种方式能够对物体的远近，方位进行判断，从视觉上来说更加接近人类所熟悉的效果。
perspective: none |;
transform: perspective() method(p) method(p) ...;
第一种方法： 将 perspective 属性更改为 >0 的数值，便可以将这个空间设置为透视投影，即所有子元素（仅仅是, 不包括自身）的投影到屏幕的方式变为透视投影。
第二种方法： 将perspective(
注意，这个透视投影的像平面和Z=0平面是重合的，原理图如下：
其中，焦点到z=0平面的距离是 perspective 的值。
从上图我们可以看出，当 perspective 的值越小的时候，Z值对于视觉效果的影响更加强烈，越大的时候，Z值对于视觉的影响更加细微。一般来说，在500px到1000px的时候视觉上更加合理。
当元素的Z值使得元素在焦点之后，元素则不会被捕捉到。
// DEMO: case2(perspective: 500px;)
可以自己思考一下，左图中为什么上下两个面会显示。（画出它的投影）
我们还可以调整焦点的位置（默认在中心）：
perspective-origin: x y;
其中x的值可以是: 长度、百分比，left(相当于0)、center(相当于50%, 默认)、right(相当于100%);
其中y的值可以是: 长度、百分比，top(相当于0)、center(相当于50%, 默认)、bottom(相当于100%)。
// DEMO: case3(perspective-origin: 0 0;)
[重要提示]请不要忘记推荐和收藏 (??□′)?? ┴─┴
git clone https://github.com/JasonKid/fezone.git
搜索 3D效果 & 透视