跳至主内容
版本：0.81

变换

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

变换是一种样式属性，可帮助您使用 2D 或 3D 变换来修改组件的外观和位置。然而，应用变换后，被变换组件周围的布局保持不变，因此可能会与邻近组件重叠。您可以通过为被变换组件设置 margin、为邻近组件设置 margin 或为容器设置 padding 来防止此类重叠。

示例​

参考

Transform 属性​

transform 接受变换对象数组或以空格分隔的字符串值。每个对象以键值对形式指定要变换的属性及其值。对象不应合并使用，每个对象只应包含一对键值。

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

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

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

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

倾斜变换需要字符串值，以便使用度（deg）表示变换。例如：

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

矩阵变换​

matrix 变换接受一个 4x4 变换矩阵作为由 16 个数字组成的数组。这允许您在一次操作中应用组合了平移、旋转、缩放和倾斜的复杂变换。

矩阵按列主序指定：

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

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

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

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

TypeRequired
array of objects: {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} or stringNo

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

已弃用

请改用 transform 属性。

Transform Origin 属性​

transformOrigin 属性设置视图变换的起点，即应用变换所围绕的点。默认变换起点为 center。

示例

取值规则​

变换起点支持 px（像素）、percentage（百分比）以及关键字 top（顶部）、left（左侧）、right（右侧）、bottom（底部）、center（中心）。

transformOrigin 属性可使用一至三个值指定，每个值代表一个偏移量。

单值语法：​

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

双值语法：​

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

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

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

三值语法：​

  • 前两个取值规则与双值语法相同

  • 第三个值（z 轴偏移）必须是 px，始终表示 Z 轴偏移

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

数组语法​

transformOrigin 也支持数组语法。这种语法便于与 Animated API 配合使用，同时避免了字符串解析，因此效率更高。

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

更多信息请参考 MDN 的变换起点指南。