Skip to main content
.transformEffect(matrix: {
    a: number; b: number;
    c: number; d: number;
    tx: number; ty: number;
}): Component
​
matrix
object
required
A 2D affine transform matrix.

​
Support

​
Usage

​
Identity transform (no change)

Text("Normal")
    .transformEffect({ a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 })

​
Scale 2x

Text("Big")
    .transformEffect({ a: 2, b: 0, c: 0, d: 2, tx: 0, ty: 0 })

​
Skew (shear)

Rectangle()
    .frame({ width: 100, height: 50 })
    .foregroundStyle(Color("blue"))
    .transformEffect({ a: 1, b: 0, c: 0.3, d: 1, tx: 0, ty: 0 })

​
Translate

Text("Moved")
    .transformEffect({ a: 1, b: 0, c: 0, d: 1, tx: 50, ty: -20 })

​
Notes

  • The transform matrix is applied as a standard 2D affine transformation: [a b tx; c d ty; 0 0 1].
  • For simple scale, rotation, or offset operations, prefer .scaleEffect(), .rotationEffect(), or .offset() for clarity.
  • The transform does not affect the component’s layout frame.

​
See Also