跳到主要内容

变换

transform 属性有什么用？​

  • 作用: 对标签做形状变换, 只影响渲染的 draw 阶段, 不触发布局;
  • 多值: 空格分隔, 按顺序依次施加;
div {
  transform: translate(30px, 20px) rotate(20deg);
}

transform 有哪些函数？​

函数作用
matrix()矩阵变换
perspective()设置透视距离
rotate()旋转
translate()平移
scale()比例缩放
skew()倾斜

transform 与回流重绘有什么关系？​

  • transform 改变元素位置和大小, 只落在 draw 阶段;
  • 相比修改 top/left 更少触发回流, 见 回流与重绘;