### CSS 3D Transform 属性详解 #### 1. 基本概念 CSS 的 `transform` 属性支持 3D 变换，允许在三维空间中对元素进行操作。这些变换不会影响文档流，而是通过改变元素的视觉呈现来实现效果[^2]。 #### 2. 常见的 3D 变换函数 ##### 2.1 3D 平移 (translate3d) 使用 `translate3d` 函数可以在 X、Y 和 Z 轴上移动元素的位置。Z 轴表示远离或靠近屏幕的方向。 ```css .element { transform: translate3d(50px, 20px, 30px); /* 在 X 轴上平移 50px，Y 轴上平移 20px，Z 轴上平移 30px */ } ``` 上述代码将元素沿三个轴方向移动[^2]。 ##### 2.2 3D 旋转 (rotateX, rotateY, rotateZ) `rotateX`、`rotateY` 和 `rotateZ` 分别用于绕 X、Y 和 Z 轴旋转元素。 ```css .element { transform: rotateX(45deg) rotateY(30deg); /* 绕 X 轴旋转 45 度，绕 Y 轴旋转 30 度 */ } ``` 此外，还可以使用 `rotate3d` 函数指定任意方向的旋转轴。 ```css .element { transform: rotate3d(1, 1, 0, 45deg); /* 沿 (1, 1, 0) 方向旋转 45 度 */ } ``` ##### 2.3 3D 缩放 (scale3d) `scale3d` 函数可以调整元素在三个轴上的大小。 ```css .element { transform: scale3d(1.5, 0.5, 2); /* 在 X 轴上放大 1.5 倍，Y 轴上缩小到一半，Z 轴上放大 2 倍 */ } ``` ##### 2.4 3D 倾斜 (skewX, skewY) 虽然倾斜通常用于 2D 空间，但在 3D 环境中仍然可以通过 `skewX` 和 `skewY` 实现类似效果。 ```css .element { transform: skewX(20deg) skewY(10deg); /* 水平倾斜 20 度，垂直倾斜 10 度 */ } ``` ##### 2.5 3D 矩阵 (matrix3d) `matrix3d` 提供了更复杂的变换能力，允许通过 16 个参数定义任意 3D 变换。 ```css .element { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 20, 30, 1); } ``` 上述代码表示一个简单的 3D 平移。 #### 3. 配合 perspective 属性 为了使 3D 效果更加明显，可以结合 `perspective` 属性设置视距。 ```css .container { perspective: 500px; /* 设置视距为 500px */ } .element { transform: translateZ(-100px); /* 将元素向后移动 100px */ } ``` #### 4. 注意事项 - 默认情况下，元素的 3D 变换发生在其父容器的坐标系中。 - 如果需要独立的 3D 变换，可以使用 `transform-style: preserve-3d;` 来保留子元素的 3D 层次。 ### 示例综合代码 以下是一个包含多种 3D 变换的综合示例： ```css .container { perspective: 800px; transform-style: preserve-3d; } .element { width: 100px; height: 100px; background-color: blue; transform: translate3d(50px, 20px, -100px) rotateX(45deg) scale3d(1.2, 1, 1); } ```