跳到主要内容

Transforms

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

示例


参考

Transform

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

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

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

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

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

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

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

Transform Origin

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

示例

Transform origin 支持 pxpercentage 和关键字 topleftrightbottomcenter 值。

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

单值语法:

  • 该值必须是 pxpercentage 或关键字 leftcenterrighttopbottom 之一。
js
{
transformOrigin: '20px',
transformOrigin: 'bottom',
}

双值语法:

  • 第一个值(x 偏移量)必须是 pxpercentage 或关键字 leftcenterright 之一。
  • 第二个值(y 偏移量)必须是 pxpercentage 或关键字 topcenterbottom 之一。
js
{
transformOrigin: '10px 2px',
transformOrigin: 'left top',
transformOrigin: 'top right',
}

三值语法:

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

数组语法

transformOrigin 也支持数组语法。这使得它与动画 API 结合使用时更加方便。它还避免了字符串解析,因此应该更高效。

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

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