transform属性可实现元素旋转、缩放和平移。rotate()用于旋转，如rotate(45deg)；scale()调整大小，如scale(1.5)；translate()移动位置，如translate(20px, 10px)；支持三维变换及组合使用，如transform: translate(50px, 30px) scale(1.2) rotate(30deg)，常用于动画与交互效果。
使用CSS的transform属性可以轻松实现元素的旋转、缩放和平移效果。这个属性不会影响页面布局，而是直接在渲染层面对元素进行视觉变换。
旋转（rotate）
通过rotate()函数可以让元素围绕其中心点旋转指定角度。
语法： transform: rotate(角度);
角度单位可以是deg（度）、rad（弧度）或turn（圈数）。
立即学习“前端免费学习笔记（深入）”；
例如：将一个盒子顺时针旋转45度transform: rotate(45deg);
也可以使用rotateX()、rotateY()、rotateZ()分别控制在三维空间中的轴向旋转。
缩放（scale）
scale()用于改变元素的尺寸大小。
语法： transform: scale(sx, sy);
sx表示水平方向缩放倍数，sy表示垂直方向缩放倍数。如果只写一个值，则两个方向等比缩放。
示例：-
transform: scale(1.5);—— 放大到原大小的1.5倍 -
transform: scale(0.5, 2);—— 水平缩小一半，垂直拉长两倍
同样支持scaleX()和scaleY()单独控制某一方向。
平移（translate）
translate()用来移动元素的位置，相对于其自身原始位置进行偏移。
语法： transform: translate(tx, ty);
tx为水平位移，ty为垂直位移。若省略ty，默认为0。
常见用法：-
transform: translate(20px, 10px);—— 向右20px，向下10px -
transform: translate(-50%, -50%);—— 常用于居中定位
也可使用translateX()或translateY()单独设置单方向偏移。
组合变换
多个变换效果可以用空格分隔写在同一行中。
示例： 同时旋转、缩放并平移元素
transform: translate(50px, 30px) scale(1.2) rotate(30deg);
注意：变换顺序会影响最终效果，建议按“平移 → 旋转 → 缩放”逻辑思考，但实际执行是从左到右依次应用。
基本上就这些。灵活运用transform能实现丰富的视觉交互效果，比如按钮悬停动画、卡片翻转、图标微动等，且性能良好，推荐优先使用。
