在CSS3引入transform属性之前，想让页面元素旋转、缩放或按像素平移，往往需要借助JavaScript或Flash计算坐标，而且频繁操作还会导致布局抖动。transform的出现把这些视觉变形统一到了样式声明中，它只改变元素在屏幕上的呈现位置和形状，不会影响元素在文档流中占据的空间。rotate、scale、translate是三个最常用的变形函数，分别处理旋转角度、缩放比例和位移距离，掌握它们的参数与组合规则后，大部分交互动效都可以直接通过CSS完成。
transform 属性的基础语法与坐标体系
transform属性可以接收一个或多个变形函数，多个函数之间用空格分隔，例如 transform: translate(20px) rotate(45deg) scale(1.2);。浏览器解析时会把这些函数叠加成最终的变换矩阵，元素的外观会按照矩阵计算结果重新绘制。它不会触发文档流的重新排列，因此对页面布局的冲击较小，性能通常优于直接修改left、top、width、height等几何属性。
理解坐标体系是准确控制变形的第一步。默认情况下，所有变形都以元素自身的中心点作为基准点，这个基准点相当于一个隐形的坐标原点。旋转时元素围绕这个点转动，缩放时元素以这个点为中心放大或缩小。通过 transform-origin 属性可以改变基准点位置，例如设置为左上角 transform-origin: top left; 后，旋转和缩放都会围绕左上角进行。这个细节在需要让某个角落固定不动时非常重要，比如卡片折叠、扑克牌翻转或图表标记旋转。
.box {
width: 120px;
height: 120px;
background: #4a90d9;
transform-origin: center center;
transform: translate(20px, 30px) rotate(45deg) scale(1.2);
}
上面的代码把位移、旋转和缩放组合在了一起。元素先向X轴移动20px、向Y轴移动30px，再围绕自身中心旋转45度，最后放大到原来的1.2倍。由于transform只影响视觉呈现，元素原来的占位仍然保留，后续兄弟元素不会因此改变位置。
rotate 旋转函数详解
rotate函数的参数是一个角度值，常见单位是deg，例如 rotate(45deg) 表示顺时针旋转45度。如果写成负值，如 rotate(-30deg)，则按照逆时针方向旋转。除了2D旋转，CSS还提供了 rotateX()、rotateY() 和 rotateZ()，其中 rotateZ() 的效果与普通 rotate() 一致，都是围绕垂直于屏幕的Z轴旋转。前两者则用于3D空间中的翻转，需要配合 perspective 才能看到明显纵深效果。
旋转基准点同样可以通过 transform-origin 调整。例如一个长条按钮，想让它的左侧端点固定，然后从水平状态旋转成垂直状态，可以设置 transform-origin: left center; 再写 transform: rotate(90deg);。如果不设置基准点，按钮会围绕自身中心旋转，视觉上会向上下两侧各伸展一半，位置与预期不同。
实际开发中，rotate常用于图标悬停、加载动画和菜单展开。一个简单的悬停旋转效果如下：
.icon-refresh {
transition: transform 0.4s ease;
}
.icon-refresh:hover {
transform: rotate(180deg);
}
.loading-circle {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
这段代码里，图标在鼠标悬停时会旋转半圈，加载圆圈则通过动画持续旋转。由于旋转是围绕元素中心进行，所以图标形状不会产生位移，视觉焦点保持稳定。需要注意的是，如果给旋转元素同时设置了阴影或渐变，这些效果也会跟着一起转动，并不是只有内容旋转。
scale 缩放函数详解
scale函数控制元素的缩放比例，语法为 scale(sx, sy)。当只写一个参数时，表示水平方向和垂直方向使用相同比例，例如 scale(1.2) 会同时放大20%。如果写两个参数，则第一个控制水平缩放，第二个控制垂直缩放，例如 scale(1.5, 1) 只把宽度放大到1.5倍，高度不变。比例值小于1表示缩小，等于1表示原始尺寸，大于1表示放大。
scale还支持负值，这会产生镜像效果。scale(-1, 1) 会把元素沿垂直轴水平翻转，scale(1, -1) 则沿水平轴上下翻转。这种技巧在需要翻转图标方向、处理照片方向或做倒影时非常有用。缩放基准点默认也是元素中心，如果希望从左上角开始放大，可以设置 transform-origin: top left; 再配合 scale(1.2) 使用。
和直接修改width、height相比，scale不会触发reflow，因此动画性能更好。但它缩放的是元素渲染后的整体结果，文字、边框、阴影会被同步拉伸或缩小，某些位图在放大后可能出现模糊。卡片悬停放大是scale最常见的应用：
.card {
transition: transform 0.3s ease;
}
.card:hover {
transform: scale(1.05);
}
.avatar-flip {
transform: scale(-1, 1);
}
卡片悬停时放大5%，配合transition可以产生平滑的视觉反馈。avatar-flip则通过水平镜像翻转头像方向。需要注意，连续多个元素同时缩放时，可能会出现重叠或遮挡，必要时应配合z-index或调整transform-origin来管理层级。
translate 位移函数详解
translate函数用于沿X轴和Y轴移动元素，语法为 translate(x, y)。第一个参数是水平位移量，第二个是垂直位移量。如果只写一个参数，则只沿X轴移动，Y轴位移为0。位移量可以使用px、em、rem等长度单位，也可以使用百分比。百分比的计算基准是元素自身的宽度或高度，例如 translate(50%, 50%) 会把元素向右移动自身宽度的一半，再向下移动自身高度的一半。
translate与 position: relative 加 left、top 的视觉效果类似，但两者的渲染机制不同。translate只触发合成阶段，不改变布局，浏览器无需重新计算元素几何信息和周围文档流，动画性能更好，尤其在移动端和大量元素场景下表现更稳定。因此，对于位移类动效，优先选择translate是常见的最佳实践。
translate的一个经典应用是绝对定位元素居中。只依靠 top: 50%; left: 50%; 会让元素左上角位于容器中心，需要再配合 transform: translate(-50%, -50%); 将元素回移自身尺寸的一半，才能实现真正的中心对齐：
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tooltip {
transform: translate(10px, -5px);
}
弹窗使用这种方案后，无论容器尺寸如何变化，弹窗都能稳定居中。tooltip则做了一个右下方向的轻微位移，让提示框不紧贴触发元素。translate的位移方向受坐标轴方向影响，如果元素已经旋转，坐标系也会跟着旋转，这一点在组合变形中需要特别注意。
组合变形与常见注意事项
把rotate、scale、translate写在同一个transform声明中时，函数之间必须用空格分隔，不能使用逗号。例如 transform: translateX(30px) rotate(20deg) scale(0.9); 是正确写法，而 transform: translateX(30px), rotate(20deg); 无法按预期生效。多个函数的顺序会影响最终效果，因为变形是基于元素当前坐标系依次执行的。先旋转再平移，平移会沿着旋转后的坐标轴方向移动；先平移再旋转，旋转则会围绕平移后的新位置中心进行。
两个组合例子可以帮助理解顺序差异：
.combo-a {
transform: translate(40px) rotate(45deg);
}
.combo-b {
transform: rotate(45deg) translate(40px);
}
combo-a先把元素向右移动40px，再旋转45度，旋转中心是移动后元素的中心。combo-b先把元素旋转45度，再沿旋转后的X轴方向移动40px。两者最终的位置和朝向看起来完全不同，所以在做复杂动效前，最好先在脑海中或者浏览器开发者工具里确认执行顺序。
另一个容易忽略的问题是transform对行内非替换元素不生效。如果目标是 <span> 或 <a> 这类行内元素，需要先设置 display: inline-block; 或 display: block;，否则旋转、缩放和位移可能没有任何效果。此外，transform会创建新的层叠上下文，变形后的元素可能会覆盖相邻内容，需要通过z-index或调整结构来控制层级。变形效果不改变文档流，因此不会影响父元素高度或兄弟元素排列，这是优点，但也会造成视觉位置与DOM位置不一致，调试时需要理解这一点。
使用transform做动画时，可以配合 transition 或 @keyframes 实现平滑过渡，并通过 will-change: transform; 提前告知浏览器该属性会发生变化，帮助启用硬件加速。对于需要频繁触发动画的元素，避免同时修改width、height、top、left等触发重排的属性，优先使用transform，可以显著降低页面卡顿。
CSS3 transformrotate函数scale translate用法修改时间：2026-09-26 10:56:48