使用 rotate() 和 scale() 可实现元素旋转与缩放，rotate(45deg) 顺时针旋转，负值逆时针，scale(1.5) 放大，scale(2, 0.5) 控制XY轴独立缩放，transform 可组合多个函数如 rotate(30deg) scale(1.2)，执行顺序从右到左，transform-origin 可修改变换中心点，默认为元素中心，常配合 transition 实现高性能动画效果。
CSS 的 transform 属性可以轻松实现元素的旋转、缩放、平移和倾斜等视觉效果。要实现旋转与缩放，主要使用 rotate() 和 scale() 函数。
元素旋转（rotate）
使用 rotate() 可以让元素围绕其中心点进行旋转，单位是度（deg）。
-
transform: rotate(45deg);表示顺时针旋转45度。 - 负值为逆时针旋转，如
rotate(-30deg)。 - 旋转基于元素的中心点（可配合
transform-origin修改）。
.box {
transform: rotate(45deg);
}
元素缩放（scale）
使用 scale() 可以改变元素的大小。
-
scale(1.5)表示在 X 和 Y 轴同时放大到 1.5 倍。 -
scale(2, 0.5)第一个参数控制水平方向（X轴），第二个控制垂直方向（Y轴）。 - 值小于 1 表示缩小，大于 1 表示放大，等于 1 为原始大小。
.box {
transform: scale(1.2, 0.8);
}
同时旋转与缩放
可以在 transform 中组合多个函数，实现复合变换。
立即学习“前端免费学习笔记（深入）”；
注意：- 多个变换函数用空格分隔。
- 执行顺序从右往左（实际渲染顺序会影响结果）。
.box {
transform: rotate(30deg) scale(1.2);
}
先缩放再旋转（书写顺序影响最终表现）。
调整变换原点
默认变换以元素中心为基准点，可通过 transform-origin 修改。
transform-origin: top left;-
transform-origin: 50% 50%;（等同于 center） transform-origin: right bottom;
.box {
transform: rotate(45deg);
transform-origin: top left;
}
基本上就这些。合理使用 transform 能提升界面动效表现力，且性能较好，适合结合 transition 实现平滑动画。 
