Back to Hippy

变形

docs/api/style/transform.md

3.4.02.3 KB
Original Source

变形

该类样式可以对组件元素做一些基础变形,例如缩放、旋转、扭曲等等。


transform

transform 可以传入多个变形的参数数组,完成对原元素的变形操作。例如:

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

它与 CSS 的 transform 参数类似,请参考 MDN 上的详细信息。

参数描述类型支持平台
perspective指定观察者与 z=0 平面的距离,默认值1280,Android 从 3.2.0 版本开始支持numberAndroid、iOS
rotate旋转,角度或弧度stringAndroid、iOS
rotateXX轴旋转,角度或弧度stringAndroid、iOS
rotateYY轴旋转,角度或弧度stringAndroid、iOS
rotateZZ轴旋转(同rotate)stringAndroid、iOS
scale缩放numberAndroid、iOS
scaleXX轴缩放numberAndroid、iOS
scaleYY轴缩放numberAndroid、iOS
translateXX轴平移numberAndroid、iOS
translateYY轴平移numberAndroid、iOS
skewXX轴倾斜,角度或弧度stringiOS
skewYY轴倾斜,角度或弧度stringiOS

!> Android 不支持 skewXskewY

!> Android 从 3.2.0 版本开始支持设置perspective,并把默认值改为和 iOS 一致。

!> Android 旧版本处理多个变形参数的顺序是反转的,从 3.2.0 开始改为和 iOS 一致。