文章目录
✍CSS3 立体 3D 变换?1 坐标轴?2 perspective 透视视图?2.1 perspective-origin ?3 旋转?6 transform-origin?7 平移?8 缩放
✍CSS3 立体 3D 变换
?1 坐标轴
在计算机图形学中，2D场景仅包含两个维度，即水平的X轴和垂直的Y轴。而在3D场景中，除了X轴和Y轴之外，还增加了一个维度，即Z轴。Z轴代表的是深度，垂直于屏幕的方向。具体来说，Z轴朝向屏幕的方向为正，远离屏幕的方向为负。
CSS3中的3D变换主要包括以下几种功能函数：
3D位移
包括translateZ() 和 translate3d(x, y, z) 两个函数，分别用于在Z轴方向上和三维空间中进行位移。 3D旋转
包括rotateX()、rotateY()、rotateZ() 和 rotate3d() 四个函数，用于围绕不同轴线进行三维旋转。相比之下，2D中仅支持 rotate(30deg) 这种围绕Z轴的旋转。 3D缩放
包括scaleZ() 和 scale3d() 两个函数，用于在Z轴上以及三维空间中进行缩放操作。 3D透视视图
通过perspective(n) 函数或 perspective 属性定义透视效果，使得元素在三维空间中的远近关系更加真实。 ?2 perspective 透视视图
perspective 透视视图也可以称作视距或景深。
如果没有定义 perspective 视距，就不会出现近大远小的效果。
要产生近大远小的视觉感受，需要满足以下两个条件：
设置perspective 视距在 Z 轴上进行变换操作（如平移、旋转、缩放） 
在程序中实现 perspective 透视效果的方法时，视线的距离（即物体与眼睛之间的距离）越小，近大远小的效果就越明显：
perspective: 1200px; （在父容器中使用）transform: perspective(1200px); （在子元素中使用） 需要注意的是，如果同时在父元素和子元素中设置 perspective，可能会产生冲突。因此，建议只在父元素中设置 perspective 属性，通常的推荐数值范围在 900px 到 1200px 之间。
当视线距离物体足够远时，基本上不会产生明显的近大远小效果。
?2.1 perspective-origin
perspective-origin 属性用于定义观察者的角度。
默认情况下，坐标系的 Z 轴位于父元素的水平中线与垂直中线的交汇处。
通过设置 perspective-origin 属性，我们可以调整观察者的角度。当使用绝对定位样式移动元素时，坐标系的 X 轴和 Y 轴会以设置了相对定位的祖先元素的中点为原点。
需要注意的是，在调整 Z 轴的位置时，用户的视角也会随之发生变化。
perspective-origin 属性可以定义观察者的角度，包括俯视、仰视、左右侧视等。
perspective-origin 属性有两个值，并且可以通过以下三种方式来设置取值：
长度单位：
perspective-origin: x轴距离 y轴距离; 百分比单位：
perspective-origin: x轴百分比 y轴百分比; （默认观察源为 50% 50%，即父元素的中心点） 方位单词：
perspective-origin: 方位单词1 方位单词2;方位单词的选项包括：top、bottom、center、left、right 如果只设置了一个值，则第二个值默认为 50%。
?3 旋转
在3D空间中，使用 rotateX、rotateY、rotateZ 方法可以围绕相应的轴线以给定的度数进行顺时针旋转。负值同样适用，此时元素将逆时针旋转。
根据左手法则：
transform: rotateX(30deg); /* 在3D空间内，沿着X轴顺时针旋转 */transform: rotateY(30deg); /* 在3D空间内，沿着Y轴顺时针旋转 */transform: rotateZ(30deg); /* 在3D空间内，沿着Z轴顺时针旋转 */rotate3d(1,1,1, 30deg); /* 3D绘制软件自动生成向量坐标 *//*x, y, z 的取值范围为 0 到 1rotate3d(1,1,1, 30deg) 表示沿 X、Y、Z 轴各自旋转 30 度，等效于 rotateX(30deg)、rotateY(30deg)、rotateZ(30deg)rotate3d(0,0,1, 30deg) 表示只在 Z 轴旋转 30 度，等效于 rotateZ(30deg)*/## ?5 transform-style 语法使被转换的子元素保留其 3D 转换，给需要 3D 变换的父（上一级或者上上级）元素设置```csstransform-style: flat|preserve-3d;| 值 | 描述 |
|---|---|
| flat | 子元素将不保留其 3D 位置。2D舞台 |
| preserve-3d | 子元素将保留其 3D 位置。3D舞台 |
transform-style: preserve-3d 能使在同一位置的元素中心点交汇。自然 flat 值就是不能够交汇咯。
只要CSS绘制3D图形，这个transform-style必须加上，perspective可以选择性的添加。
?6 transform-origin
| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值：left、center、right、length、% |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、% |
| z-axis | 定义视图被置于 Z 轴的何处。可能的值：length |
示例：
/* 将 z轴的原点坐标设置为+50px，相当于这时候原点坐标向我们眼睛靠近50px 这时候加上景深的100px，相当于我们距离屏幕为150px了。*/transform: perspective(100px);transform-origin: 50% 50% 50px;transform-origin其实和视距也是有关系的。
?7 平移
translate()方法，根据左(X 轴)和顶部(Y 轴)位置给定的参数，从当前元素位置移动。
transform: translateX(30px);transform: translateY(30px);transform: translateZ(30px);translate3d(x,y,z);?8 缩放
在CSS3 3D变形中，主要的缩放函数包括 scaleZ() 和 scale3d()。当 scale3d() 中的 X 轴和 Y 轴的缩放比例都为 1 时，即 scale3d(1, 1, sz)，其效果等同于 scaleZ(sz)。通过使用这些3D缩放函数，可以让元素在 Z 轴上按比例进行缩放。默认缩放比例为 1，当值大于 1 时，元素放大；当值小于 1 且大于 0.01 时，元素缩小。
函数参数说明：
scale3d(sx, sy, sz)
sx：横向（X轴）缩放比例sy：纵向（Y轴）缩放比例sz：深度（Z轴）缩放比例 scaleZ(s)
s：指定元素在 Z 轴上的缩放比例。scaleZ(z) 是一个难点，它指的是 Z 轴方向上的纵深（视距），并不会在 Z 轴方向上加厚元素。这个效果通常需要在父元素中设置 perspective，然后观察子元素位移距离的变化。 /*为什么它不会产生任何效果？*/transform: perspective(100px) scaleZ(2);原因就是没有产生近大远小，至少来说，必须要通过其他的变形函数产生近大远小才可以看到效果正确示例：transform: perspective(100px) scaleZ(2) translateZ(1px);注意：scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果
scaleZ需要配合 perspective 和 rotateX(45deg) 观看效果。
.box { transform-style: preserve-3d; perspective: 800px;}.center { transform: scaleZ(10) rotateX(45deg);}/*or*/.box { transform-style: preserve-3d;}.center { transform: perspective(800px) scaleZ(10) rotateX(45deg);}....
