Interface TransformProps

interface TransformProps {
    clipPath?: ResponsiveValue<ClipPath>;
    rotate?: ResponsiveValue<Length>;
    scale?: ResponsiveValue<Length>;
    scaleX?: ResponsiveValue<Length>;
    scaleY?: ResponsiveValue<Length>;
    skewX?: ResponsiveValue<Length>;
    skewY?: ResponsiveValue<Length>;
    transform?: ResponsiveValue<("auto" | Transform | "auto-gpu")>;
    transformOrigin?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">;
    translateX?: ResponsiveValue<Length>;
    translateY?: ResponsiveValue<Length>;
}

Hierarchy (view full)

Properties

clipPath? rotate? scale? scaleX? scaleY? skewX? skewY? transform? transformOrigin? translateX? translateY?

Properties

Optional clipPath

clipPath?: ResponsiveValue<ClipPath>

The CSS clip-path property.

It creates a clipping region that sets what part of an element should be shown.

Optional rotate

rotate?: ResponsiveValue<Length>

Sets the rotation value of the element

Optional scale

scale?: ResponsiveValue<Length>

Sets the scale value of the element

Optional scaleX

scaleX?: ResponsiveValue<Length>

Scale value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-scale-x

Optional scaleY

scaleY?: ResponsiveValue<Length>

Scale value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-scale-y

Optional skewX

skewX?: ResponsiveValue<Length>

Skew value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-skew-x

Optional skewY

skewY?: ResponsiveValue<Length>

Skew value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-skew-y

Optional transform

transform?: ResponsiveValue<("auto" | Transform | "auto-gpu")>

The CSS transform property

Optional transformOrigin

transformOrigin?: ResponsiveValue<number | "center" | "left" | "right" | string & {} | "top" | "bottom" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset">

The CSS transform-origin property

Optional translateX

translateX?: ResponsiveValue<Length>

Translate value of an elements in the x-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-translate-x

Optional translateY

translateY?: ResponsiveValue<Length>

Translate value of an elements in the y-direction.

  • Only works if transform=auto
  • It sets the value of --chakra-translate-y

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc