diff --git a/en/application-dev/reference/arkui-ts/figures/coordinates.png b/en/application-dev/reference/arkui-ts/figures/coordinates.png
new file mode 100644
index 0000000000000000000000000000000000000000..839f765b9f62dd9efcf1d2ee891a191c9a5ba053
Binary files /dev/null and b/en/application-dev/reference/arkui-ts/figures/coordinates.png differ
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
index 0f946ddb498c50fa7ace4c25c04a79eb8bc47fe1..276ed2eb01104d3215bde8e1a0de4ecf08037bd7 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-transformation.md
@@ -9,13 +9,16 @@ Transformation attributes allow you to rotate, translate, scale, or transform a
## Attributes
-| Name | Type | Description |
-| --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
-| rotate | {
x?: number,
y?: number,
z?: number,
angle?: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | 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.
Default value:
{
x: 0,
y: 0,
z: 0,
angle: 0,
centerX: '50%',
centerY: '50%'
}
Since API version 9, this API is supported in ArkTS widgets.|
-| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | 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.
Default value:
{
x: 0,
y: 0,
z: 0
}
Since API version 9, this API is supported in ArkTS widgets.|
+| Name | Type | Description |
+| --------- | ---------------------------------------- | ---------------------------------------- |
+| rotate | {
x?: number,
y?: number,
z?: number,
angle: number \| string,
centerX?: number \| string,
centerY?: number \| string
} | How the component rotates in the coordinate system (as shown below) with the upper left corner of the component as the coordinate origin. (x, y, z) specifies a vector as the axis of rotation.
- **angle**: rotation angle. A positive angle indicates a clockwise rotation, and a negative angle indicates a counterclockwise rotation. The value can be of the string type, for example, **'90deg'**.
- **centerX** and **centerY** are used to set the center of rotation.
The axis and center of rotation are set based on the coordinate system, which remains where it is when the component is moved.
Default value:
{
x: 0,
y: 0,
z: 0,
centerX: '50%',
centerY: '50%'
}
Since API version 9, this API is supported in ArkTS widgets.|
+| translate | {
x?: number \| string,
y?: number \| string,
z? : number \| string
} | How the component is translated in the coordinate system (as shown below) with the upper left corner of the component as the coordinate origin. Values of **x**, **y**, and **z** indicate the translation distance along the respective axis. A positive value indicates a forward movement towards the respective axis, and a negative value indicates a backward movement towards the respective axis. The translation distance can be a number or a string (for example, **'10px'** or **'10%'**).
Default value:
{
x: 0,
y: 0,
z: 0
}
Since API version 9, this API is supported in ArkTS widgets.|
| scale | {
x?: number,
y?: number,
z?: number,
centerX?: number \| string,
centerY?: number \| string
} | 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.
Default value:
{
x: 1,
y: 1,
z: 1,
centerX:'50%',
centerY:'50%'
}
Since API version 9, this API is supported in ArkTS widgets.|
-| transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. |
+| transform | [Matrix4Transit](../apis/js-apis-matrix4.md) | Transformation matrix of the component. |
+> **NOTE**
+>
+> If both the **rotate** and **scale** attributes are set for a component, the values of **centerX** and **centerY** conflict. In this case, the one that is set later in time prevails.
## Example