Transforms

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

¥Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.

示例

¥Example

---

参考

¥Reference

转换

¥Transform

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

¥transform accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.

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

¥The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:

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

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

¥The same could also be achieved using a space-separated string:

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

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

¥The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:

{
  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 属性。

¥Deprecated. Use the transform prop instead.

转换来源

¥Transform Origin

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

¥The transformOrigin property sets the origin for a view's transformations. The transform origin is the point around which a transformation is applied. By default, the origin of a transform is center.

示例

¥Example

值

¥Values

变换源支持 px、percentage 和关键字 top、left、right、bottom、center 值。

¥Transform origin supports px, percentage and keywords top, left, right, bottom, center values.

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

¥The transformOrigin property may be specified using one, two, or three values, where each value represents an offset.

单值语法：

¥One-value syntax:

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

  ¥The value must be a px, a percentage, or one of the keywords left, center, right, top, and bottom.

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

二值语法：

¥Two-value syntax:

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

  ¥First value (x-offset) must be a px, a percentage, or one of the keywords left, center, and right.

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

  ¥The second value (y-offset) must be a px, a percentage, or one of the keywords top, center, and bottom.

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

三值语法：

¥Three-value syntax:

• 前两个值与二值语法相同。

  ¥The first two values are the same as for the two-value syntax.

• 第三个值（z 偏移）必须是 px。它始终代表 Z 偏移。

  ¥The third value (z-offset) must be a px. It always represents the Z offset.

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

数组语法

¥Array syntax

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

¥transformOrigin also supports an array syntax. It makes it convenient to use it with Animated APIs. It also avoids string parsing, so should be more efficient.

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

你可以参考 MDN 的 转换来源 指南以获取更多信息。

¥You may refer to MDN's guide on Transform origin for additional information.