【前端】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;

值描述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);}

....