Transforms
变换是样式属性,可帮助您使用 2D 或 3D 变换修改组件的外观和位置。但是,一旦应用变换,布局在变换后的组件周围保持不变,因此它可能会与附近的组件重叠。您可以对变换后的组件应用外边距,或对附近的组件应用外边距,或对容器应用内边距,以防止此类重叠。
示例
参考
变换
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
属性。
变换原点
transformOrigin
属性设置视图变换的原点。变换原点是应用变换的点。默认情况下,变换的原点为 center
。
示例
值
变换原点支持 px
、百分比
以及关键字 top
、left
、right
、bottom
、center
值。
transformOrigin
属性可以使用一个、两个或三个值来指定,每个值表示一个偏移量。
单值语法:
- 该值必须是
px
、百分比
,或关键字left
、center
、right
、top
和bottom
之一。
js
{
transformOrigin: '20px',
transformOrigin: 'bottom',
}
两值语法:
- 第一个值(x 偏移量)必须是
px
、百分比
,或关键字left
、center
和right
之一。 - 第二个值(y 偏移量)必须是
px
、百分比
,或关键字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 关于变换原点的指南以获取更多信息。