css transform属性如何实现元素旋转与缩放
2026-10-29 14:39:33
CSS的transform属性通过rotate()和scale()函数可分别实现元素的旋转与缩放，二者可组合使用，并可通过transform-origin调整变换基准点，配合transition可实现高性能动画。
一、元素旋转（rotate()）- 功能：让元素围绕其中心点（或指定点）旋转，单位为度（deg）。
- 语法：
rotate(angle)：angle为正值时顺时针旋转，负值时逆时针旋转。
示例：.box { transform: rotate(45deg); } /* 顺时针旋转45度 */.box { transform: rotate(-30deg); } /* 逆时针旋转30度 */
- 功能：调整元素在X轴和Y轴上的尺寸，参数控制缩放比例。
- 语法：
scale(value)：X和Y轴同时缩放，value为缩放倍数（1为原始大小，>1放大，<1缩小）。
scale(x, y)：分别指定X轴和Y轴的缩放比例。
示例：.box { transform: scale(1.5); } /* X/Y轴同时放大1.5倍 */.box { transform: scale(2, 0.5); } /* X轴放大2倍，Y轴缩小至0.5倍 */
- 组合方式：在transform中用空格分隔多个函数，执行顺序从右到左（即书写顺序的逆序会影响最终效果）。
- 示例：.box { transform: rotate(30deg) scale(1.2); /* 实际执行顺序：先缩放1.2倍，再旋转30度 */}
若需先旋转再缩放，需调整函数顺序：.box { transform: scale(1.2) rotate(30deg); /* 实际执行顺序：先旋转30度，再缩放1.2倍 */}
- 功能：修改旋转或缩放的基准点，默认为元素中心（50% 50%）。
- 语法：
关键字：top、right、bottom、left、center（可组合使用，如top left）。
百分比/长度值：transform-origin: 20% 30%;（X轴20%，Y轴30%）。
- 示例：.box { transform: rotate(45deg); transform-origin: top left; /* 基准点为左上角 */}
- 性能优势：transform的变换操作在合成层（Composite Layer）中进行，不会触发重排（Reflow）或重绘（Repaint），适合实现高性能动画。
- 结合transition：通过transition属性为transform添加平滑过渡效果。
示例：.box { transition: transform 0.3s ease;}.box:hover { transform: rotate(45deg) scale(1.2); /* 悬停时旋转并放大 */}
- 旋转：使用rotate(angle)，正值为顺时针，负值为逆时针。
- 缩放：使用scale(value)或scale(x, y)，控制X/Y轴的缩放比例。
- 组合变换：多个函数用空格分隔，执行顺序从右到左。
- 基准点调整：通过transform-origin修改变换的起点。
- 性能优化：结合transition或animation实现平滑动画，避免布局抖动。
热门标签
