transform.md

Transform Module

Methods for applying CSS transforms to React components.

const Card = View('div')
  .scale(1.5) // zoom in by 1.5
  .rotate(90) // 90deg
  .translate(-25, -10) // x, y
  .element();

export const InteractiveCard = ({ children }) => (
  <Card>{children}</Card>
);

• Shortcut Methods
  • transform
  • rotate
  • scale
  • translate
  • skew
  • perspective
  • transform

Shortcut Methods

rotate(angle: string | number)

Rotates the element.

Rotate by 45 degrees:

.rotate(45)

Rotate by -90 degrees:

.rotate('-90deg')

scale(x: number, y?: number)

Scales the element.

Scale uniformly by 1.5:

.scale(1.5)

Scale horizontally by 2 and vertically by 0.5:

.scale(2, 0.5)

translate(x: string | number, y?: string | number)

Translates the element.

Move 20 pixels to the right:

.translate(20)

Move 10 pixels right and 30 pixels down:

.translate('10px', '30px')

skew(x: string | number, y?: string | number)

Skews the element.

Skew 10 degrees along the X-axis:

.skew(10)

Skew 15 degrees on X-axis and -5 degrees on Y-axis:

.skew('15deg', '-5deg')

perspective(value: string | number)

Applies perspective transform to create depth effect.

Add 1000px perspective:

.perspective(1000)

Add 80em perspective:

.perspective('80em')

Core Layout Function

transform(value: string)

The transform function is the primary method for applying CSS transforms.

Combine multiple transformations:

.transform('translateX(100px) rotate(45deg) scale(1.5)')