答案：本文讲解CSS transform属性中rotate和scale的使用方法。1. rotate用于元素旋转，支持deg和rad单位，结合transform-origin可改变旋转中心点；2. scale实现元素缩放，可分别设置水平和垂直方向比例；3. 多个变换函数可用空格分隔同时应用，但顺序影响最终效果；4. 配合transition可实现平滑动画，提升交互体验。掌握这些技巧可在无需JavaScript的情况下创建丰富视觉效果。
在网页设计中，CSS 的 transform 属性让我们可以轻松实现元素的旋转、缩放、倾斜和平移等视觉效果。本文将重点讲解如何使用 rotate 和 scale 来控制元素的旋转与缩放，并提供实用代码示例。
1. 使用 rotate 实现元素旋转
rotate 可以让元素围绕其中心点或自定义原点进行旋转，单位是度（deg）。
常见用法：- transform: rotate(45deg); —— 顺时针旋转45度
- transform: rotate(-90deg); —— 逆时针旋转90度
- transform: rotate(3.14rad); —— 使用弧度单位旋转约180度
你还可以结合 transform-origin 改变旋转中心点：
div {
transform: rotate(45deg);
transform-origin: top left; /* 从左上角旋转 */
}2. 使用 scale 实现元素缩放
scale 控制元素在水平和垂直方向上的放大或缩小。
立即学习“前端免费学习笔记（深入）”；
基本语法：- transform: scale(1.5); —— 等比放大为原来的1.5倍
- transform: scale(0.5); —— 缩小为原来的一半
- transform: scale(2, 0.5); —— 水平放大2倍，垂直缩小一半
scale 值大于1表示放大，小于1大于0表示缩小，等于0则元素不可见。
3. 同时使用 rotate 和 scale
你可以通过空格分隔多个变换函数，同时应用旋转和缩放。
div {
transform: rotate(30deg) scale(1.2);
}注意：变换的顺序会影响最终效果。先缩放再旋转，和先旋转再缩放，视觉结果可能不同。
例如：- scale(2) rotate(45deg)：先放大，再旋转
- rotate(45deg) scale(2)：先旋转，再放大（旋转轴也一起被缩放影响）
4. 添加过渡效果使动画更自然
配合 transition 可以让旋转和缩放产生平滑动画。
div {
transform: scale(1);
transition: transform 0.3s ease;
}
div:hover {
transform: rotate(180deg) scale(1.2);
}
这样当鼠标悬停时，元素会平滑地旋转180度并放大，提升交互体验。
基本上就这些。掌握 transform 中的 rotate 和 scale，能让你在不借助 JavaScript 的情况下实现丰富的视觉动效，适合用于按钮悬停、图标动画、图片展示等场景。不复杂但容易忽略的是 transform-origin 和变换顺序的影响，实际使用中多测试几次就能掌握规律。
