变换

变换是一组样式属性，可帮助你使用 2D 或 3D 变换来修改组件的外观和位置。不过，一旦应用了变换，布局在被变换组件周围仍保持不变，因此它可能会与附近的组件重叠。你可以给被变换的组件、附近的组件添加外边距，或给容器添加内边距，以防止这种重叠。

示例

---

参考

Transform

transform 接受一个由变换对象组成的数组，或者以空格分隔的字符串值。每个对象都以要变换的属性作为键，并以该变换中使用的值作为值。对象不应被合并。每个对象只使用一个键/值对。

旋转变换要求使用字符串，以便将变换表示为角度（deg）或弧度（rad）。例如：

JavaScript

{
  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

同样也可以使用以空格分隔的字符串来实现：

JavaScript

{
  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

倾斜变换要求使用字符串，以便将变换表示为角度（deg）。例如：

JavaScript

{
  transform: [{skewX: '45deg'}],
}

矩阵变换

matrix 变换接受一个 4x4 变换矩阵，形式为包含 16 个数字的数组。这使你可以在单个操作中应用组合了平移、旋转、缩放和倾斜的复杂变换。

矩阵按列优先顺序指定：

JavaScript

{
  transform: [
    {
      matrix: [
        scaleX,
        skewY,
        0,
        0,
        skewX,
        scaleY,
        0,
        0,
        0,
        0,
        1,
        0,
        translateX,
        translateY,
        0,
        1,
      ],
    },
  ];
}

例如，要应用缩放和倾斜的组合：

JavaScript

{
  transform: [
    {
      matrix: [
        1, 0.5, 0, 0, 0.5, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
      ],
    },
  ];
}

备注

当你需要应用预先计算好的变换矩阵时，矩阵变换非常有用，例如来自动画库的矩阵，或者在构建 UI 编辑器应用时。对于基本变换，建议使用单独的变换属性（scale、rotate、translate 等），因为它们更易读。

类型	是否必需
对象数组：{matrix: number[]}、{perspective: number}、{rotate: string}、{rotateX: string}、{rotateY: string}、{rotateZ: string}、{scale: number}、{scaleX: number}、{scaleY: number}、{translateX: number}、{translateY: number}、{skewX: string}、{skewY: string} 或字符串	否

---

🗑️ decomposedMatrix、rotation、scaleX、scaleY、transformMatrix、translateX、translateY

已弃用

请改用 transform 属性。

Transform Origin

transformOrigin 属性用于设置视图变换的原点。变换原点是应用变换时围绕的点。默认情况下，变换的原点是 center。

示例

值

Transform origin 支持 px、percentage 以及关键字 top、left、right、bottom、center 值。

transformOrigin 属性可以使用一个、两个或三个值来指定，其中每个值代表一个偏移量。

单值语法：

• 该值必须是 px、percentage，或关键字 left、center、right、top、bottom 之一。

JavaScript

{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

双值语法：

• 第一个值（x 偏移）必须是 px、percentage，或关键字 left、center、right 之一。
• 第二个值（y 偏移）必须是 px、percentage，或关键字 top、center、bottom 之一。

JavaScript

{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

三值语法：

• 前两个值与双值语法相同。
• 第三个值（z 偏移）必须是 px。它始终表示 Z 偏移。

JavaScript

{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

数组语法

transformOrigin 也支持数组语法。它让你可以方便地与 Animated API 一起使用。它还避免了字符串解析，因此效率可能更高。

JavaScript

{
  // 使用数值
  transformOrigin: [10, 30, 40],
  // 混合数值和百分比值
  transformOrigin: [10, '20%', 0],
}

你可以参考 MDN 关于 Transform origin 的指南以获取更多信息。