Skip to main content

Transforms

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

示例​

Reference

Transform​

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

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

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

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

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

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

js
{
  transform: [{skewX: '45deg'}],
}
TypeRequired
对象数组: {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} 或 字符串No

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY​

Deprecated. 请使用 transform 属性代替。

Transform Origin​

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

示例

Values​

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

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

One-value syntax:​

  • 该值必须是 px、percentage 或关键字 left、center、right、top 和 bottom 之一。
js
{
  transformOrigin: '20px',
  transformOrigin: 'bottom',
}

Two-value syntax:​

  • 第一个值（x 偏移量）必须是 px、percentage 或关键字 left、center 和 right 之一。
  • 第二个值（y 偏移量）必须是 px、percentage 或关键字 top、center 和 bottom 之一。
js
{
  transformOrigin: '10px 2px',
  transformOrigin: 'left top',
  transformOrigin: 'top right',
}

Three-value syntax:​

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

Array syntax​

transformOrigin 也支持数组语法。这使得将其与 Animated API 一起使用更加方便。它还避免了字符串解析，因此效率更高。

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

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