玩转 CSS3 3D 变换：打造炫酷立体网页效果

✍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 属性有两个值，并且可以通过以下三种方式来设置取值：

1. 长度单位：
   • perspective-origin: x轴距离 y轴距离;
2. 百分比单位：
   • perspective-origin: x轴百分比 y轴百分比; （默认观察源为 50% 50%，即父元素的中心点）
3. 方位单词：
   • 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 到 1
rotate3d(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 变换的父（上一级或者上上级）元素设置

```css
transform-style: flat|preserve-3d;

transform-style: preserve-3d 能使在同一位置的元素中心点交汇。自然 flat 值就是不能够交汇咯。

只要CSS绘制3D图形，这个transform-style必须加上，perspective可以选择性的添加。

💎6 transform-origin

示例：

/* 
    将 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);
}