1# Transformation 2 3Transformation attributes allow you to rotate, translate, scale, or transform a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Attributes 10 11 12| Name | Type | Description | 13| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ | 14| rotate | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: number \| string,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Rotation axis. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The default value is **0**. **centerX** and **centerY** are used to set the rotation center point.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0,<br>angle: 0,<br>centerX: '50%',<br>centerY: '50%'<br>}<br>Since API version 9, this API is supported in ArkTS widgets.| 15| translate | {<br>x?: number \| string,<br>y?: number \| string,<br>z? : number \| string<br>} | Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The value cannot be a percentage.<br>Default value:<br>{<br>x: 0,<br>y: 0,<br>z: 0<br>}<br>Since API version 9, this API is supported in ArkTS widgets.| 16| scale | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Scale ratio along the x-, y-, and z-axis. The default value is **1**. **centerX** and **centerY** are used to set the scale center point.<br>Default value:<br>{<br>x: 1,<br>y: 1,<br>z: 1,<br>centerX:'50%',<br>centerY:'50%'<br>}<br>Since API version 9, this API is supported in ArkTS widgets.| 17| transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. | 18 19 20## Example 21 22```ts 23// xxx.ets 24import matrix4 from '@ohos.matrix4' 25 26@Entry 27@Component 28struct TransformExample { 29 build() { 30 Column() { 31 Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 32 Row() 33 .rotate({ 34 x: 0, 35 y: 0, 36 z: 1, 37 centerX: '50%', 38 centerY: '50%', 39 angle: 300 40 }) // The component rotates around the center point of the rotation axis (0,0,1) clockwise by 300 degrees. 41 .width(100).height(100).backgroundColor(0xAFEEEE) 42 43 Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14) 44 Row() 45 .translate({ x: 100, y: 10 }) // The component translates by 100 along the x-axis and by 10 along the y-axis. 46 .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 }) 47 48 Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 49 Row() 50 .scale({ x: 2, y: 0.5}) // The height and width are doubled. The z-axis has no effect in 2D mode. 51 .width(100).height(100).backgroundColor(0xAFEEEE) 52 53 Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14) 54 Row() 55 .width(100).height(100).backgroundColor(0xAFEEEE) 56 .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({ 57 x: 0, 58 y: 0, 59 z: 1, 60 angle: 60 61 })) 62 }.width('100%').margin({ top: 5 }) 63 } 64} 65``` 66 67 68
