[CSS3]2D与3D变换技术详解

文章目录

[2D变换（2D Transform）](#2D变换（2D Transform）)
[3D变换（3D Transform）](#3D变换（3D Transform）)
- - 结语

CSS3中的2D变换与3D变换是指通过transform属性对HTML元素进行几何操作，使其在二维或三维空间中进行移动、旋转、缩放和倾斜等变换。这些变换为前端开发者提供了创建复杂动画和视觉效果的能力，丰富了网页设计的表现力。

2D变换（2D Transform）

2D变换是指在二维平面内对元素进行的几何操作。CSS3中的2D变换主要包括以下几种：

translate() - 平移
- 功能：将元素在水平和垂直方向上移动。
- 语法：
  | **值 ** | 含义 |
  | --- | --- |
  | translateX | 设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度
  的百分比。 |
  | translateY | 设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度
  的百分比。 |
  | translate | 一个值代表水平方向，两个值代表：水平和垂直方向。 |

css 复制代码

transform: translate(x, y);

示例：transform: translate(50px, 100px); 将元素在水平方向移动50px，在垂直方向移动100px。

位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。

与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是
其自身。

浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。

transform 可以链式编写，例如：transform: translateX(30px) translateY(40px);

位移对行内元素无效。

位移配合定位，可实现元素水平垂直居中

rotate() - 旋转

2D 旋转是指：让元素在二维平面内，顺时针旋转或逆时针旋转，具体使用方式如下：

先给元素添加 **转换属性 **transform
编写 transform 的具体值，相关可选值如下

值	含义
rotate	设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。

功能：围绕元素的中心点旋转元素。
语法：

css 复制代码

transform: rotate(angle);

示例：transform: rotate(45deg); 将元素顺时针旋转45度。

scale() - 缩放
先给元素添加 **转换属性 **transform
编写 transform 的具体值，相关可选值如下：

值	含义
scaleX	设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小
于 1 缩小。
scaleY	设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小
于 1 缩小。
scale	同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩
放；两个值分别代表：水平缩放、垂直缩放。

功能：按指定的比例缩放元素的大小。
语法：

css 复制代码

transform: scale(sx, sy);

示例：transform: scale(2, 1.5); 将元素在X轴方向缩放2倍，Y轴方向缩放1.5倍。

skew() - 倾斜
- 功能：沿X轴或Y轴倾斜元素。
- 语法：

css 复制代码

transform: skew(ax, ay);

示例：transform: skew(30deg, 20deg); 将元素在X轴方向倾斜30度，Y轴方向倾斜20度。

matrix() - 矩阵
- 功能：通过矩阵参数对元素进行复杂的2D变换。
- 语法：

css 复制代码

transform: matrix(a, b, c, d, e, f);

示例：transform: matrix(1, 0.5, 0.5, 1, 30, 20); 结合平移、缩放、旋转等效果的2D变换。

3D变换（3D Transform）

3D变换是在三维空间内对元素进行的几何操作。相比2D变换，3D变换更加复杂，可以在Z轴（深度）上对元素进行操作。CSS3中的3D变换主要包括以下几种：

使用 transform-style 开启 3D 空间，可选值如下：

flat ：让子元素位于此元素的二维平面内（ 2D 空间）------ 默认值

preserve-3d ：让子元素位于此元素的三维空间内（ 3D 空间）

translate3d() - 3D平移
- 功能：在X、Y、Z三个方向上移动元素。
- 语法：

css 复制代码

transform: translate3d(x, y, z);

示例：transform: translate3d(50px, 100px, 200px); 将元素在X轴上移动50px，Y轴上移动100px，Z轴上移动200px。

rotateX() - 绕X轴旋转
- 功能：围绕X轴旋转元素。
- 语法：

css 复制代码

transform: rotateX(angle);

示例：transform: rotateX(45deg); 将元素绕X轴旋转45度。

rotateY() - 绕Y轴旋转
- 功能：围绕Y轴旋转元素。
- 语法：

css 复制代码

transform: rotateY(angle);

示例：transform: rotateY(45deg); 将元素绕Y轴旋转45度。

rotateZ() - 绕Z轴旋转
- 功能：围绕Z轴旋转元素（与2D变换中的rotate相同）。
- 语法：

css 复制代码

transform: rotateZ(angle);

示例：transform: rotateZ(45deg); 将元素绕Z轴旋转45度。

scale3d() - 3D缩放
- 功能：在X、Y、Z三个方向上缩放元素。
- 语法：

css 复制代码

transform: scale3d(sx, sy, sz);

示例：transform: scale3d(2, 1.5, 1); 将元素在X、Y、Z方向分别缩放。

perspective() - 视角
- 功能：设置3D变换的视角距离，使元素在3D空间中有深度感。
- 语法：

css 复制代码

perspective: distance;

示例：

css 复制代码

perspective: 500px;
transform: rotateY(45deg);

为元素设置500px的视角，并将其绕Y轴旋转45度。

结语

2D和3D变换为Web设计和开发提供了丰富的视觉效果。掌握这些变换技术，不仅能增强网页的互动性，还能为用户带来更直观、生动的体验。在实际应用中，可以将这些变换与CSS动画结合，创造出更加复杂和有趣的效果。