跳至主要内容

Transforms

变换是样式属性，可帮助您使用 2D 或 3D 变换修改组件的外观和位置。但是，应用变换后，变换组件周围的布局保持不变，因此它可能会与附近的组件重叠。您可以对变换组件、附近的组件或容器应用边距或填充以防止此类重叠。

示例​

参考

Transform​

transform 接受一系列变换对象或以空格分隔的字符串值。每个对象都将要转换的属性指定为键，以及在转换中使用的值。不应组合对象。每个对象应使用单个键/值对。

旋转变换需要一个字符串，以便可以以度数 (deg) 或弧度 (rad) 表示变换。例如

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

也可以使用以空格分隔的字符串实现相同的效果

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

倾斜变换需要一个字符串，以便可以以度数 (deg) 表示变换。例如

{
  transform: [{skewX: '45deg'}],
}
类型必填
对象数组：{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 属性。

变换原点​

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

示例

值​

变换原点支持 px、百分比 和关键字 top、left、right、bottom、center 值。

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

单值语法：​

  • 该值必须是 px、百分比 或以下关键字之一：left、center、right、top 和 bottom。
{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

双值语法：​

  • 第一个值 (x 偏移量) 必须是 px、百分比 或以下关键字之一：left、center 和 right。
  • 第二个值 (y 偏移量) 必须是 px、百分比 或以下关键字之一：top、center 和 bottom。
{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

三值语法：​

  • 前两个值与双值语法的相同。
  • 第三个值 (z 偏移量) 必须是 px。它始终表示 Z 偏移量。
{
  transformOrigin: '2px 30% 10px',
  transformOrigin: 'right bottom 20px',
}

数组语法​

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

{
  // Using numeric values
  transformOrigin: [10, 30, 40],
  // Mixing numeric and percentage values
  transformOrigin: [10, '20%', 0],
}

您可以参考 MDN 关于 变换原点 的指南以获取更多信息。