`transform` 是 CSS 中一个功能强大的属性，用于在不改变文档流的情况下，对元素进行**2D 或 3D 空间变换**。它通过一系列变换函数，可以实现元素的**位移、旋转、缩放、倾斜**等效果，是创建现代网页动效和视觉增强的核心工具之一 [ref_1][ref_3][ref_5]。 ### 一、核心变换函数 `transform` 属性的值由一个或多个变换函数构成，多个函数间用空格分隔，**执行顺序为从左到右**，顺序不同可能导致最终视觉效果截然不同。 | 变换类型 | 函数 | 作用描述 | 示例值 | | :--- | :--- | :--- | :--- | | **位移** | `translate(x, y)` | 在水平和垂直方向移动元素。 | `translate(50px, 100px)` | | | `translateX(n)` | 仅在水平方向移动元素。 | `translateX(10%)` | | | `translateY(n)` | 仅在垂直方向移动元素。 | `translateY(-20px)` | | | `translateZ(n)` | 在 3D 空间的 Z 轴移动元素。 | `translateZ(300px)` | | **缩放** | `scale(x, y)` | 在水平和垂直方向缩放元素。 | `scale(1.5, 0.8)` | | | `scaleX(n)` | 仅在水平方向缩放元素。 | `scaleX(2)` | | | `scaleY(n)` | 仅在垂直方向缩放元素。 | `scaleY(0.5)` | | **旋转** | `rotate(angle)` | 在 2D 平面旋转元素。 | `rotate(45deg)` | | | `rotateX(angle)` | 沿 X 轴进行 3D 旋转。 | `rotateX(60deg)` | | | `rotateY(angle)` | 沿 Y 轴进行 3D 旋转。 | `rotateY(45deg)` | | | `rotateZ(angle)` | 沿 Z 轴进行 3D 旋转（同 `rotate`）。 | `rotateZ(90deg)` | | **倾斜** | `skew(x-angle, y-angle)` | 沿 X 和 Y 轴倾斜元素。 | `skew(20deg, 10deg)` | | | `skewX(angle)` | 仅沿 X 轴倾斜元素。 | `skewX(30deg)` | | | `skewY(angle)` | 仅沿 Y 轴倾斜元素。 | `skewY(15deg)` | | **3D变换** | `perspective(n)` | 设置观察者到 3D 场景的距离，产生透视效果。 | `perspective(500px)` | | **矩阵** | `matrix(a,b,c,d,e,f)` | 使用一个 2D 变换矩阵，整合所有 2D 变换。 | `matrix(1, 0.2, 0, 1, 0, 0)` | | | `matrix3d(...)` | 使用一个 4x4 矩阵，整合所有 3D 变换。 | (参数复杂，通常由工具生成) | ### 二、关键属性与用法 #### 1. `transform-origin`：变换原点 此属性用于设置元素变换的基准点（原点）。默认值是 `50% 50% 0`，即元素的中心。 ```css .box { width: 100px; height: 100px; background-color: coral; transform-origin: top left; /* 变换原点设置为左上角 */ transition: transform 0.3s; } .box:hover { transform: rotate(45deg); /* 将以左上角为原点旋转45度 */ } ``` * `transform-origin: x-axis y-axis z-axis;` * **x-axis, y-axis** 值可以是：`left`、`center`、`right`、`<length>`、`<percentage>`。 * **z-axis** 仅用于 3D 变换，值为 `<length>`。 #### 2. 与 `transition` 和 `animation` 的配合 `transform` 本身只定义最终状态。要创建平滑动画，需结合 `transition`（过渡）或 `animation`（关键帧动画）属性 [ref_2][ref_3]。 * **配合 `transition`（触发式动画）**：常用于响应鼠标悬停等交互。 ```css .card { transition: transform 0.5s ease-in-out; /* 为transform属性添加过渡效果 */ } .card:hover { transform: scale(1.1) rotate(5deg); /* 悬停时放大并轻微旋转 */ } ``` * **配合 `animation`（主动动画）**：可创建更复杂、自运行的动画序列 [ref_2]。 ```css @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } } .ball { animation: bounce 1s infinite; /* 球体无限弹跳 */ } ``` ### 三、应用场景与实例 #### 场景1：交互反馈（悬停效果） 通过 `transform: scale()` 和 `transition` 增强按钮的点击感。 ```css .button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; transition: all 0.3s ease; /* 过渡所有属性 */ cursor: pointer; } .button:hover { transform: scale(1.05); /* 轻微放大 */ box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 同时添加阴影 */ } ``` #### 场景2：创建斜切布局 使用 `transform: skew()` 可以轻松创建非矩形的视觉区域，常见于网站头部或特色区域设计 [ref_1]。 ```html <style> .skew-section { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 60px 20px; transform: skewY(-5deg); /* 整个区域向上倾斜 */ } .skew-content { transform: skewY(5deg); /* 将内部内容反向倾斜，保持文字水平 */ text-align: center; } </style> <section class="skew-section"> <div class="skew-content"> <h2>创意斜切标题区</h2> <p>利用skew属性创建的动态布局。</p> </div> </section> ``` #### 场景3：3D卡片翻转 结合 `rotateY()` 和 `perspective` 实现3D翻转效果。 ```html <style> .card-container { perspective: 1000px; /* 为3D变换添加透视 */ width: 200px; height: 300px; } .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; /* 子元素保留3D位置 */ transition: transform 0.8s; } .card:hover { transform: rotateY(180deg); /* 悬停时沿Y轴翻转180度 */ } .card-front, .card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; /* 隐藏背面 */ border-radius: 10px; } .card-front { background: lightblue; } .card-back { background: lightcoral; transform: rotateY(180deg); /* 背面初始就是翻转状态 */ } </style> <div class="card-container"> <div class="card"> <div class="card-front">正面</div> <div class="card-back">背面</div> </div> </div> ``` ### 四、注意事项与最佳实践 1. **性能优势**：`transform` 和 `opacity` 属性的变化通常由浏览器的**合成器（Compositor）** 处理，不触发重排（Reflow）或重绘（Repaint），因此动画性能极高，适合用于实现流畅的交互效果。 2. **不影响文档流**：应用 `transform` 的元素仍在原文档流中占据位置，其变换不会影响周围元素的布局。 3. **变换顺序至关重要**：`transform: translateX(100px) rotate(45deg)` 与 `transform: rotate(45deg) translateX(100px)` 的结果完全不同，因为旋转会改变元素的坐标轴方向。 4. **硬件加速**：3D 变换（如 `translateZ(0)`）常被用来触发 GPU 硬件加速，以提升复杂动画的渲染性能，但需谨慎使用，避免内存消耗过大。 综上所述，`transform` 属性是实现现代网页动态、立体视觉效果的基础。通过熟练掌握其各类函数，并结合 `transition`、`animation` 以及 `transform-origin` 等辅助属性，可以创造出从简单的交互反馈到复杂的 3D 场景等一系列丰富的用户体验 [ref_6]。