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 使用

直接对 、 这类默认 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。