transform属性通过rotate、scale、translate实现旋转、缩放、位移，可组合使用并配合transition或animation创建高性能动画，默认以中心点为变换原点，可通过transform-origin调整。
css 的 transform 属性是实现元素视觉变形的核心工具，常用于创建旋转、缩放、位移和倾斜等效果。结合 transition 或 animation，可以轻松实现流畅的动画效果。以下是 transform 常见用法的详细说明。
旋转（rotate）
使用 rotate() 函数可以让元素围绕其中心点进行旋转，单位为度（deg）。
- rotate(45deg)：顺时针旋转45度
- rotate(-90deg)：逆时针旋转90度
- rotate(180deg)：翻转元素
示例：
.element {
transform: rotate(45deg);
}
缩放（scale）
scale() 函数用于改变元素的尺寸大小，接受一个或两个参数（x 和 y 方向）。
立即学习“前端免费学习笔记（深入）”；
- scale(1.5)：在 x 和 y 方向都放大1.5倍
- scale(1.2, 0.8)：水平放大，垂直缩小
- scale(0.5)：整体缩小为原来的一半
常用于鼠标悬停时的放大效果：
.element:hover {
transform: scale(1.1);
transition: transform 0.3s ease;
}
位移（translate）
translate() 用于移动元素的位置，不会影响其他元素布局。
- translate(20px, 10px)：向右移动20px，向下10px
- translateX(50px)：仅水平移动
- translateY(-30px)：仅垂直上移
适合制作滑入滑出动画或居中定位：
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
组合变换与动画
多个 transform 函数可组合使用，顺序会影响最终效果。
.animated-box {
transform: translateX(100px) rotate(45deg) scale(1.2);
transition: transform 0.5s ease-in-out;
}
.animated-box:hover {
transform: translateX(0) rotate(0) scale(1);
}
也可配合 @keyframes 创建复杂动画：
@keyframes spin {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}
基本上就这些。掌握 transform 的基本函数及其动画应用，能大幅提升页面交互表现力，且性能优于传统布局变动方式。不复杂但容易忽略的是变换原点，默认以中心点（50% 50%）为基准，可通过 transform-origin 调整。