# Transformation

Name

Type

Default Value

Description

rotate

{

x?: number,

y?: number,

z?: number,

angle?: Angle,

centerX?: Length,

centerY?: Length

}

{

x: 0,

y: 0,

z: 0,

angle: 0,

centerX: '50%',

centerY: '50%'

}

The vector (x, y, z) specifies a 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.

translate

{

x?: Length,

y?: Length,

z? : Length

}

{

x: 0,

y: 0,

z: 0

}

Translation distance along the x-, y-, and z-axis. The translation direction is determined by the positive and negative values. The default value is 0.

scale

{

x?: number,

y?: number,

z?: number,

centerX?: Length,

centerY?: Length

}

{

x: 1,

y: 1,

z: 1,

centerX:'50%',

centerY:'50%'

}

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.

transform

matrix: Matrix4

-

Transformation matrix of the component.
## Example ``` import Matrix4 from '@ohos.matrix4' @Entry @Component struct TransformExample { build() { Column() { Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) Row() .rotate({ x: 1, y: 1, z: 1, centerX: '50%', centerY: '50%', angle: 300 }) // 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) 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}) Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30) 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) Row() .width(100).height(100).backgroundColor(0xAFEEEE) .transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 })) }.width('100%').margin({ top: 5 }) } } ``` ![](figures/1111-59.png)