Update docs (11177)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md

@@ -7,8 +7,6 @@ The **\<DatePicker>** component allows users to select a date from the given ran
 > This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
 
 
-
-
 ## Child Components
 
 Not supported
@@ -32,14 +30,14 @@ Creates a date picker in the given date range.
 
 | Name   | Type       | Description           |
 | ------| -------------- | -------- |
-| lunar | boolean  | Whether to display the lunar calendar.<br>-&nbsp;**true**: Display the lunar calendar.<br>-&nbsp;**false**: Do not display the lunar calendar.<br>Default value: **false**|
+| lunar | boolean  | Whether to display the lunar calendar.<br>- **true**: Display the lunar calendar.<br>- **false**: Do not display the lunar calendar.<br>Default value: **false**|
 
 
 ## Events
 
 | Name| Description|
 | -------- | -------- |
-| onChange(callback:&nbsp;(value:&nbsp;DatePickerResult)&nbsp;=&gt;&nbsp;void) | Triggered when a date is selected.|
+| onChange(callback: (value: DatePickerResult) =&gt; void) | Triggered when a date is selected.|
 
 ## DatePickerResult
 
@@ -53,55 +51,35 @@ Creates a date picker in the given date range.
 ## Example
 
 
-### Date Picker Sample Code (With Lunar Calendar)
-
 ```ts
 // xxx.ets
 @Entry
 @Component
-struct DatePickerExample01 {
+struct DatePickerExample {
+  @State isLunar: boolean = false
   private selectedDate: Date = new Date('2021-08-08')
 
   build() {
     Column() {
+      Button('Switch Calendar')
+        .margin({ top: 30 })
+        .onClick(() => {
+          this.isLunar = !this.isLunar
+        })
       DatePicker({
         start: new Date('1970-1-1'),
         end: new Date('2100-1-1'),
-        selected: this.selectedDate,
+        selected: this.selectedDate
       })
-      .lunar(true)
-      .onChange((date: DatePickerResult) => {
-        console.info('select current date is: ' + JSON.stringify(date))
-      })
-    }.width('100%')
-  }
-}
-```
-
+        .lunar(this.isLunar)
+        .onChange((value: DatePickerResult) => {
+          this.selectedDate.setFullYear(value.year, value.month, value.day)
+          console.info('select current date is: ' + JSON.stringify(value))
+        })
 
-### Date Picker Sample Code (No Lunar Calendar)
-
-```ts
-// xxx.ets
-@Entry
-@Component
-struct DatePickerExample02 {
-  private selectedDate: Date = new Date('2021-08-08')
-
-  build() {
-    Column() {
-      DatePicker({
-        start: new Date('1970-1-1'),
-        end: new Date('2100-1-1'),
-        selected: this.selectedDate,
-      })
-      .lunar(false)
-      .onChange((date: DatePickerResult) => {
-        console.info('select current date is: ' + JSON.stringify(date))
-      })
     }.width('100%')
   }
 }
 ```
 
-![en-us_image_0000001251092975](figures/en-us_image_0000001251092975.png)
+![datePicker](figures/datePicker.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md

@@ -6,8 +6,6 @@ The **\<ImageAnimator>** component enables images to be played frame by frame. T
 >
 > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-
-
 ## Child Components
 
 Not supported
@@ -20,26 +18,26 @@ ImageAnimator()
 
 ## Attributes
 
-| Name    | Type                 | Mandatory     | Description                  |
-| ---------- | ----------------------- | -------- | -------- |
-| images     | Array&lt;ImageFrameInfo&gt; | No  | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.<br>Default value: **[]** |
-| state      | [AnimationStatus](ts-appendix-enums.md#animationstatus) | No   | Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**|
-| duration   | number  | No   | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**|
-| reverse    | boolean | No   | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**|
-| fixedSize  | boolean | No   | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**|
-| preDecode  | number  | No   | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.<br>Default value: **0**|
-| fillMode   | [FillMode](ts-appendix-enums.md#fillmode) | No   | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**|
-| iterations | number  | No   | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
+| Name    | Type                 |Description                  |
+| ---------- | ----------------------- |-------- |
+| images     | Array&lt;[ImageFrameInfo](#imageframeinfo)&gt; | Image frame information. The information of each frame includes the image path, image size, image position, and image playback duration. For details, see **ImageFrameInfo**.<br>Default value: **[]**<br>**NOTE**<br>Dynamic update is not supported.|
+| state      | [AnimationStatus](ts-appendix-enums.md#animationstatus) |  Playback status of the animation. The default status is **Initial**.<br>Default value: **AnimationStatus.Initial**|
+| duration   | number  | Playback duration, in ms. The default duration is 1000 ms. When the duration is **0**, no image is played. The value change takes effect only at the beginning of the next cycle. When a separate duration is set in **images**, the setting of this attribute is invalid.<br>Default value: **1000**|
+| reverse    | boolean | Playback sequence. The value **false** indicates that images are played from the first one to the last one, and **true** indicates that images are played from the last one to the first one.<br>Default value: **false**|
+| fixedSize  | boolean | Whether the image size is the same as the component size.<br> **true**: The image size is the same as the component size. In this case, the width, height, top, and left attributes of the image are invalid.<br> **false**: The width, height, top, and left attributes of each image must be set separately.<br>Default value: **true**|
+| preDecode  | number  | Whether to enable pre-decoding. The default value **0** indicates that pre-decoding is disabled. The value **2** indicates that two images following the currently playing frame will be cached in advance to improve performance.<br>Default value: **0**|
+| fillMode   | [FillMode](ts-appendix-enums.md#fillmode) | Status before and after the animation starts. For details about the options, see **FillMode**.<br>Default value: **FillMode.Forwards**|
+| iterations | number  | Number of times that the animation is played. By default, the animation is played once. The value **-1** indicates that the animation is played for an unlimited number of times.<br>Default value: **1**|
 
-- ImageFrameInfo
+## ImageFrameInfo
 
 | Name  | Type  | Mandatory| Description|
 | -------- | -------------- | -------- | -------- |
 | src      | string \| [Resource](ts-types.md#resource)<sup>9+</sup> | Yes   | Image path. The image format can be .svg, .png, or .jpg. Since API version 9, this attribute accepts paths of the [Resource](ts-types.md#resource) type.|
-| width    | [Length](ts-types.md#length)  | No | Image width.<br>Default value: **0**         |
-| height   | [Length](ts-types.md#length)  | No | Image height.<br>Default value: **0**            |
-| top      | [Length](ts-types.md#length)  | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0**   |
-| left     | [Length](ts-types.md#length)  | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0**   |
+| width    | number \| string | No | Image width.<br>Default value: **0**         |
+| height   | number \| string | No | Image height.<br>Default value: **0**            |
+| top      | number \| string | No | Vertical coordinate of the image relative to the upper left corner of the widget<br>Default value: **0**   |
+| left     | number \| string | No | Horizontal coordinate of the image relative to the upper left corner of the widget<br>Default value: **0**   |
 | duration | number          | No    | Playback duration of each image frame, in milliseconds.<br>Default value: **0**              |
 
 
@@ -47,11 +45,11 @@ ImageAnimator()
 
 | Name| Description|
 | -------- | -------- |
-| onStart(event:&nbsp;()&nbsp;=&gt;&nbsp;void)  | Triggered when the animation starts to play.|
-| onPause(event:&nbsp;()&nbsp;=&gt;&nbsp;void)  | Triggered when the animation playback is paused.|
-| onRepeat(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is repeated.|
-| onCancel(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is canceled.|
-| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | Triggered when the animation playback is complete.|
+| onStart(event: () =&gt; void)  | Triggered when the animation starts to play.|
+| onPause(event: () =&gt; void)  | Triggered when the animation playback is paused.|
+| onRepeat(event: () =&gt; void) | Triggered when the animation playback is repeated.|
+| onCancel(event: () =&gt; void) | Triggered when the animation playback is canceled.|
+| onFinish(event: () =&gt; void) | Triggered when the animation playback is complete.|
 
 
 ## Example
@@ -66,47 +64,46 @@ struct ImageAnimatorExample {
   @State iterations: number = 1
 
   build() {
-    Column({ space:5 }) {
+    Column({ space: 10 }) {
       ImageAnimator()
         .images([
-          { 
-            // The comment folder is at the same level as the pages folder.
-            src: '/comment/bg1.jpg',
+          {
+            src: $r('app.media.img1'),
             duration: 500,
-            width: 325,
-            height: 200,
+            width: 170,
+            height: 120,
             top: 0,
             left: 0
           },
           {
-            src: '/comment/bg2.jpg',
+            src: $r('app.media.img2'),
             duration: 500,
-            width: 325,
-            height: 200,
+            width: 170,
+            height: 120,
             top: 0,
-            left: 0
+            left: 170
           },
           {
-            src: $r('app.media.bg3'),
+            src: $r('app.media.img3'),
             duration: 500,
-            width: 325,
-            height: 200,
-            top: 0,
-            left: 0
+            width: 170,
+            height: 120,
+            top: 120,
+            left: 170
           },
           {
-            src: $rawfile('bg4.jpg'),
+            src: $r('app.media.img4'),
             duration: 500,
-            width: 325,
-            height: 200,
-            top: 0,
+            width: 170,
+            height: 120,
+            top: 120,
             left: 0
           }
         ])
         .state(this.state).reverse(this.reverse).fixedSize(false).preDecode(2)
-        .fillMode(FillMode.None).iterations(this.iterations).width(325).height(210)
-        .margin({top:100})
-        .onStart(() => { // Triggered when the frame animation playback starts.
+        .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
+        .margin({ top: 100 })
+        .onStart(() => {
           console.info('Start')
         })
         .onPause(() => {
@@ -118,35 +115,35 @@ struct ImageAnimatorExample {
         .onCancel(() => {
           console.info('Cancel')
         })
-        .onFinish(() => { // Triggered after the frame animation playback is complete.
-          this.state = AnimationStatus.Stopped
+        .onFinish(() => {
           console.info('Finish')
         })
       Row() {
         Button('start').width(100).padding(5).onClick(() => {
           this.state = AnimationStatus.Running
-        })
+        }).margin(5)
         Button('pause').width(100).padding(5).onClick(() => {
-          this.state = AnimationStatus.Paused
-        })
+          this.state = AnimationStatus.Paused     // Display the image of the current frame.
+        }).margin(5)
         Button('stop').width(100).padding(5).onClick(() => {
-          this.state = AnimationStatus.Stopped
-        })
+          this.state = AnimationStatus.Stopped    // Display the image of the initial frame.
+        }).margin(5)
       }
+
       Row() {
         Button('reverse').width(100).padding(5).onClick(() => {
           this.reverse = !this.reverse
-        })
+        }).margin(5)
         Button('once').width(100).padding(5).onClick(() => {
           this.iterations = 1
-        })
-        Button('iteration').width(100).padding(5).onClick(() => {
-          this.iterations = -1
-        })
+        }).margin(5)
+        Button('infinite').width(100).padding(5).onClick(() => {
+          this.iterations = -1 // The animation is played for an unlimited number of times.
+        }).margin(5)
       }
-    }.width('100%').height('100%').backgroundColor(0xF1F3F5)
+    }.width('100%').height('100%')
   }
 }
 ```
 
-![en-us_image_0000001211898470](figures/en-us_image_0000001211898470.gif)
+![imageAnimator](figures/imageAnimator.gif)

en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md

 # TextPicker
 
-The **TextPicker** component allows users to scroll to select text.
+The **\<TextPicker>** component allows users to scroll to select text.
 
 >  **NOTE**
 >
@@ -23,14 +23,14 @@ Creates a text picker based on the selection range specified by **range**.
 | Name| Type| Mandatory| Description|
 | -------- | -------- | -------- | -------- |
 | range | string[] \| [Resource](ts-types.md#resource)| Yes| Data selection range of the picker.|
-| selected | number | No| Index of the selected item in the range.<br>Default value: **0**|
-| value | string | No| Value of the selected item. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item|
+| selected | number | No| Index of the default item in the range.<br>Default value: **0**|
+| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item|
 
 ## Attributes
 
 | Name| Type| Description|
 | -------- | -------- | -------- |
-| defaultPickerItemHeight | number \| string | Default height of an item in the picker.|
+| defaultPickerItemHeight | number \| string | Height of each item in the picker.|
 
 ## Events
 
@@ -53,7 +53,7 @@ struct TextPickerExample {
 
   build() {
     Column() {
-      TextPicker({range: this.fruits, selected: this.select})
+      TextPicker({ range: this.fruits, selected: this.select })
         .onChange((value: string, index: number) => {
           console.info('Picker item changed, value: ' + value + ', index: ' + index)
         })

en/application-dev/reference/arkui-ts/ts-basic-components-timepicker.md

@@ -16,7 +16,7 @@ Not supported
 
 TimePicker(options?: {selected?: Date})
 
-Creates a time picker whose default time range is from 00:00 to 23:59.
+Creates a time picker, which is in 24-hour format by default.
 
 **Parameters**
 
@@ -38,7 +38,8 @@ Creates a time picker whose default time range is from 00:00 to 23:59.
 | ---------------------------------------- | ----------- |
 | onChange(callback: (value: TimePickerResult ) => void) | Triggered when a time is selected.|
 
-### TimePickerResult
+## TimePickerResult
+
 | Name    | Type  | Description     |
 | ------ | ------ | ------- |
 | hour   | number | Hour portion of the selected time.|
@@ -55,20 +56,27 @@ Creates a time picker whose default time range is from 00:00 to 23:59.
 @Entry
 @Component
 struct TimePickerExample {
+  @State isMilitaryTime: boolean = false
   private selectedTime: Date = new Date('2022-07-22T08:00:00')
 
   build() {
     Column() {
+      Button ('Switch Time Format')
+        .margin({ top: 30 })
+        .onClick(() => {
+          this.isMilitaryTime = !this.isMilitaryTime
+        })
       TimePicker({
         selected: this.selectedTime,
       })
-      .useMilitaryTime(true)
-      .onChange((date: TimePickerResult) => {
-        console.info('select current date is: ' + JSON.stringify(date))
-      })
+        .useMilitaryTime(this.isMilitaryTime)
+        .onChange((value: TimePickerResult) => {
+          this.selectedTime.setHours(value.hour, value.minute)
+          console.info('select current date is: ' + JSON.stringify(value))
+        })
     }.width('100%')
   }
 }
 ```
 
-![en-us_image_0000001251292933](figures/en-us_image_0000001251292933.gif)
+![timePicker](figures/timePicker.gif)

en/application-dev/reference/arkui-ts/ts-container-flex.md

 # Flex
 
-The **\<Flex>** component allows for elastic layout of child components.
+The **\<Flex>** component allows for flexible layout of child components.
 
 > **NOTE**
 > - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-> - The **\<Flex>** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
+> - The **\<Flex>** component adapts the layout of flex items during rendering. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
 
 
 ## Required Permissions
@@ -14,7 +14,7 @@ None
 
 ## Child Components
 
-This component can contain child components.
+Supported
 
 
 ## APIs
@@ -30,7 +30,7 @@ Creates a standard **\<Flex>** component.
   | wrap           | [FlexWrap](ts-appendix-enums.md#flexwrap)  | No   | FlexWrap.NoWrap   | Whether the **\<Flex>** component has a single line or multiple lines.                    |
   | justifyContent | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in the **\<Flex>** component along the main axis.                     |
   | alignItems     | [ItemAlign](ts-appendix-enums.md#itemalign) | No   | ItemAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the cross axis.                    |
-  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
+  | alignContent   | [FlexAlign](ts-appendix-enums.md#flexalign) | No   | FlexAlign.Start   | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
 
 
 ## Example
@@ -148,7 +148,7 @@ struct FlexExample2 {
 // xxx.ets
 @Component
 struct JustifyContentFlex {
-  @Prop justifyContent : number
+  justifyContent : number
 
   build() {
     Flex({ justifyContent: this.justifyContent }) {
@@ -197,7 +197,7 @@ struct FlexExample3 {
 // xxx.ets
 @Component
 struct AlignItemsFlex {
-  @Prop alignItems : number
+  alignItems : number
 
   build() {
     Flex({ alignItems: this.alignItems }) {
@@ -246,7 +246,7 @@ struct FlexExample4 {
 // xxx.ets
 @Component
 struct AlignContentFlex {
-  @Prop alignContent: number
+  alignContent: number
 
   build() {
     Flex({ wrap: FlexWrap.Wrap, alignContent: this.alignContent }) {

en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md

@@ -9,26 +9,26 @@ Transformation attributes allow you to rotate, translate, scale, or transform a
 ## Attributes
 
 
-| Name       | Type                                                          | Description                                      |
-| --------- | ------------------------------------------------------------------------ | ---------------------------------------- |
-| rotate    | {<br>x?: number,<br>y?: number,<br>z?: number,<br>angle?: Angle,<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>} |
-| 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>}|
-| scale     | {<br>x?: number,<br>y?: number,<br>z?: number,<br>centerX?: number \| string,<br>centerY?: number \| string<br>} | Scale ratio of 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>} |
-| transform | Matrix4Transit                                                 | Transformation matrix of the component.                            |
+| Name     | Type                                                    | Description                                                        |
+| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| 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>} |
+| 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>} |
+| 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>} |
+| transform | Matrix4Transit                 | Transformation matrix of the component.                                    |
 
 
 ## Example
 
 ```ts
 // xxx.ets
-import Matrix4 from '@ohos.matrix4'
+import matrix4 from '@ohos.matrix4'
 
 @Entry
 @Component
 struct TransformExample {
   build() {
     Column() {
-      Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
+      Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
       Row()
         .rotate({
           x: 1,
@@ -40,23 +40,28 @@ struct TransformExample {
         }) // The component rotates around the center point of the rotation axis (1,1,1) clockwise by 300 degrees.
         .width(100).height(100).backgroundColor(0xAFEEEE)
 
-      Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(30)
+      Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
       Row()
-        .translate({ x: 100, y: 5 }) // The component translates by 100 along the x-axis and by 5 along the y-axis.
-        .width(100).height(100).backgroundColor(0xAFEEEE).margin({bottom:10})
+        .translate({ x: 100, y: 10 }) // The component translates by 100 along the x-axis and by 10 along the y-axis.
+        .width(100).height(100).backgroundColor(0xAFEEEE).margin({ bottom: 10 })
 
-      Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
+      Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
       Row()
         .scale({ x: 2, y: 0.5}) // The height and width are doubled. The z-axis has no effect in 2D mode.
         .width(100).height(100).backgroundColor(0xAFEEEE)
 
-      Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
+      Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
       Row()
         .width(100).height(100).backgroundColor(0xAFEEEE)
-        .transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 }))
+        .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({
+          x: 0,
+          y: 0,
+          z: 1,
+          angle: 60
+        }))
     }.width('100%').margin({ top: 5 })
   }
 }
 ```
 
-![en-us_image_0000001257058401](figures/en-us_image_0000001257058401.png)
+![transform](figures/transform.PNG)