HTML5变形布局技巧与实战应用

transform-origin 控制变形中心点，单位支持 px / % / keywords

默认以元素中心（50% 50%）为原点变形，但很多场景需要调整，比如下拉菜单从顶部展开、按钮点击时从左上角放大。这时必须显式设置 transform-origin：

.menu {
  transform: scaleY(0);
  transform-origin: top;
}
.menu.open {
  transform: scaleY(1);
}

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);
}

以上就是《HTML5变形布局技巧与实战应用》的详细内容，更多关于的资料请关注golang学习网公众号！