transform需配合display:block或inline-block使用；transform-origin控制变形中心，默认50% 50%；transition必须与transform同级声明；3d变形需父容器设transform-style:preserve-3d和3d transform；transform-origin不支持calc()混用时需js动态设置。
transform 属性必须配合 display: block 或 inline-block 使用
直接对 <span></span>、<a></a> 这类默认 display: inline 的元素应用 transform，旋转或缩放后常出现定位错乱或效果不生效——因为 transform 对纯 inline 元素的渲染行为不可靠。解决方法很简单：
span.transformed {
display: inline-block;
transform: rotate(30deg);
}或者改用 display: block 并设置宽高。若需保持行内流式布局，优先选 inline-block；若要精确控制尺寸和定位，用 block 更稳妥。
transform-origin 控制变形中心点，单位支持 px / % / keywords
默认以元素中心（50% 50%）为原点变形，但很多场景需要调整，比如下拉菜单从顶部展开、按钮点击时从左上角放大。这时必须显式设置 transform-origin：
.menu {
transform: scaleY(0);
transform-origin: top;
}
.menu.open {
transform: scaleY(1);
}注意：top left 等关键词等价于 0 0，center 等价于 50% 50%；混合使用（如 20px 30%）完全合法，但负值可能让变形中心落到元素外，导致意外位移。
transition + transform 组合动画必须写在被变形元素自身上
常见错误是把 transition 写在父容器或伪类选择器里，结果 hover 时没动画。正确写法是：
-
transition必须和transform同级声明在目标元素上 - 推荐写全属性：用
transition: transform 0.3s ease，而非transition: all 0.3s（避免意外触发动画） - 触发变形的 class（如
.active）只需覆盖transform值，不要重复写transition
.card {
transform: scale(1);
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover {
transform: scale(1.05);
}
3D 变形需开启 preserve-3d 且父容器设 transform-style
想让子元素在 3D 空间中保持自身坐标系（比如旋转一个立方体的六个面），仅对子元素加 transform: rotateX(90deg) 不够。必须：
- 父容器设
transform-style: preserve-3d - 父容器本身要有 3D transform（哪怕只是
translateZ(0)）来建立 3D 渲染上下文 - 避免在父容器上用
overflow: hidden，它会剪裁 3D 子元素
.cube {
transform: translateZ(-100px);
transform-style: preserve-3d;
}
.cube-face {
transform: rotateY(90deg) translateZ(100px);
}没有 transform-style: preserve-3d，所有子元素都会被拍平到父容器平面，3D 效果失效。
浏览器对 transform 的硬件加速支持已很成熟，但过度嵌套或频繁修改 transform 值仍可能触发重排。真正难处理的是 transform-origin 在响应式布局中的动态计算——它不支持 calc() 与百分比混用（如 calc(50% + 10px) 50% 在部分旧版 Safari 失效），这时候得用 JS 动态设置 style。 
