# CSS3核心特性-第9章-9.1-2D变换（transform） ## 一、概念讲解 **2D变换（transform）** 是CSS3提供的用于对元素进行平面空间变换的技术，通过修改元素的坐标、旋转角度、缩放比例或倾斜程度，实现动态视觉效果，且不会影响文档流布局。常见的2D变换包括**平移（translate）**、**旋转（rotate）**、**缩放（scale）** 和**倾斜（skew）**，可单独使用或组合应用。 ## 二、语法参考 ### 2.1 基础语法 ```css /* 单一变换 */ .element { transform: translate(50px, 20px); /* 平移 */ } /* 组合变换（按从右到左顺序执行） */ .element { transform: rotate(30deg) scale(1.2) translate(10px); } ``` ### 2.2 常用变换函数 | 函数 | 作用 | 语法示例 | 说明 | |--------------------|-------------------------------|-----------------------------------|---------------------------------------| | `translate(x, y)` | 沿X/Y轴平移元素 | `translate(50px, 20px)` | 正值向右/下平移，负值向左/上平移 | | `translateX(x)` | 仅沿X轴平移 | `translateX(30%)` | 百分比基于元素自身宽度 | | `translateY(y)` | 仅沿Y轴平移 | `translateY(-10px)` | - | | `rotate(angle)` | 顺时针旋转元素（单位deg/rad） | `rotate(45deg)` | 正值顺时针，负值逆时针 | | `scale(x, y)` | 沿X/Y轴缩放元素 | `scale(1.5, 0.8)` | 1为原始大小，>1放大，<1缩小 | | `scaleX(x)` | 仅沿X轴缩放 | `scaleX(0.5)` | - | | `scaleY(y)` | 仅沿Y轴缩放 | `scaleY(2)` | - | | `skew(x-angle, y-angle)` | 沿X/Y轴倾斜元素 | `skew(10deg, 5deg)` | 正值向右/下倾斜，负值向左/上倾斜 | | `skewX(angle)` | 仅沿X轴倾斜 | `skewX(-15deg)` | - | | `skewY(angle)` | 仅沿Y轴倾斜 | `skewY(20deg)` | - | ## 三、实战示例 ### 3.1 基础示例：按钮悬停效果 ```html 悬停变换 ``` **效果**：鼠标悬停时，按钮放大1.1倍、向上平移5px、顺时针旋转2度，增强交互反馈。 ### 3.2 进阶示例：卡片翻转效果 ```html ``` **注意**：此示例结合了`perspective`和`transform-style`实现3D视觉，但核心变换仍基于2D的`rotateY`函数。 ## 四、注意事项 1. **坐标系原点**：默认变换原点为元素中心（`transform-origin: 50% 50%`），可通过`transform-origin`修改（如`transform-origin: left bottom`以左下角为原点）。 ```css .element { transform-origin: top left; /* 左上角为变换原点 */ transform: rotate(30deg); /* 围绕左上角旋转 */ } ``` 2. **性能优化**：变换会触发浏览器重绘（repaint），复杂动画建议添加`will-change: transform`提示浏览器优化渲染。 3. **兼容性**：IE9需添加前缀`-ms-transform`，现代浏览器（Chrome/Firefox/Safari）无需前缀。 4. **与`position`的区别**：transform仅视觉变换，不影响其他元素布局；而`position: relative`会占据原始空间，可能导致其他元素位移。 ## 五、自测题 1. 如何实现元素沿X轴平移50px且放大1.5倍的组合变换？ ```css /* 答案 */ .element { transform: scale(1.5) translateX(50px); } /* 注意顺序：先缩放后平移 */ ``` 2. `transform: skew(30deg, 0)`与`transform: skewX(30deg)`的效果是否相同？ **答案**：相同，`skew(30deg, 0)`等价于`skewX(30deg)`。 3. 变换原点对`rotate`的影响：若设置`transform-origin: top right`，元素旋转时会围绕哪个点转动？ **答案**：右上角。