transform与opacity优化

transform和opacity是CSS中唯一只触发Composite阶段的属性，是实现高性能动画的关键。

核心原理

渲染阶段对比

为什么性能最优

GPU纹理操作不依赖CPU计算：

transform变换 = 矩阵乘法（GPU擅长）
opacity混合 = 纹理alpha通道处理（GPU擅长）

transform变换详解

translate移动

/* 2D移动 */
.move2d {
  transform: translate(100px, 50px);
  transform: translateX(100px);
  transform: translateY(50px);
}

/* 3D移动（强制硬件加速） */
.move3d {
  transform: translate3d(100px, 50px, 0);
  transform: translateZ(0);  /* 常用加速技巧 */
}

/* 动画示例 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

scale缩放

/* 2D缩放 */
.scale2d {
  transform: scale(1.5);         /* 双向缩放 */
  transform: scale(1.5, 1);      /* 水平缩放 */
  transform: scaleX(1.5);        /* 水平缩放 */
  transform: scaleY(1.5);        /* 垂直缩放 */
}

/* 3D缩放 */
.scale3d {
  transform: scale3d(1.5, 1.2, 1);
}

/* 动画示例 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

rotate旋转

/* 2D旋转 */
.rotate2d {
  transform: rotate(45deg);
  transform: rotate(-90deg);
}

/* 3D旋转 */
.rotate3d {
  transform: rotateX(45deg);     /* 绕X轴 */
  transform: rotateY(45deg);     /* 绕Y轴 */
  transform: rotateZ(45deg);     /* 绕Z轴 */
  transform: rotate3d(1, 1, 0, 45deg);  /* 自定义轴 */
}

/* 动画示例 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

组合变换

/* 注意顺序：从右到左执行 */
.complex {
  transform: translate(100px, 0) rotate(45deg) scale(1.5);
}

/* 执行顺序：scale → rotate → translate */

变换顺序影响结果，先旋转后移动与先移动后旋转效果不同。

opacity透明度

基础用法

/* 透明度范围：0-1 */
.transparent {
  opacity: 0.5;
}

.hidden {
  opacity: 0;
  /* 注意：元素仍占据空间，可交互 */
}

.visible {
  opacity: 1;
}

与visibility对比

动画示例

.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-in.active {
  opacity: 1;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

优化技巧

使用3D变换强制加速

/* 方法1：translate3d */
.accelerated {
  transform: translate3d(0, 0, 0);
}

/* 方法2：translateZ */
.accelerated {
  transform: translateZ(0);
}

避免box-sizing影响

/* scale不改变实际尺寸，box-sizing不影响 */
.box {
  width: 100px;
  transform: scale(1.5);
  /* 视觉尺寸150px，DOM尺寸仍是100px */
}

使用transform-origin控制变换中心

.default {
  transform-origin: center center;  /* 默认 */
}

.top-left {
  transform-origin: top left;
  transform: rotate(45deg);  /* 从左上角旋转 */
}

.custom {
  transform-origin: 20px 30px;
  transform: scale(1.5);  /* 从指定点缩放 */
}

perspective添加透视

.perspective-container {
  perspective: 1000px;
}

.card {
  transform: rotateY(45deg);
  /* 有透视效果的3D旋转 */
}

性能陷阱

组合变换过多属性

/* 避免频繁组合 */
.bad {
  transform: translateX(calc(var(--x) * 1px))
             translateY(calc(var(--y) * 1px))
             rotate(calc(var(--r) * 1deg))
             scale(calc(var(--s)));
}

/* 简化组合 */
.good {
  transform: translate(var(--x)px, var(--y)px);
}

过大的变换值

/* 避免极端变换 */
.bad {
  transform: scale(100);  /* 可能导致纹理过大 */
}

.good {
  transform: scale(1.5);  /* 适中值 */
}

实战示例

弹窗动画

.modal {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: opacity 0.3s, transform 0.3s;
}

.modal.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

卡片悬停

.card {
  transition: transform 0.2s, opacity 0.2s;
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  opacity: 0.95;
}

滑动菜单

.menu {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.menu.open {
  transform: translateX(0);
}

要点总结

1. transform/opacity是唯一只触发合成的CSS属性
2. translate移动替代left/top
3. scale缩放替代width/height变化
4. opacity动画替代visibility动画
5. 使用translateZ(0)强制硬件加速
6. 变换顺序从右到左执行，注意组合顺序