Interface TransformsStyle

interface TransformsStyle {
    rotation?: AnimatableNumericValue;
    scaleX?: AnimatableNumericValue;
    scaleY?: AnimatableNumericValue;
    transform?: string | ({
        perspective: AnimatableNumericValue;
    } & {
        matrix: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotate: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotateX: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotateY: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        rotateZ: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        scale: AnimatableNumericValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        scaleX: AnimatableNumericValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        scaleY: AnimatableNumericValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        translateX: AnimatableNumericValue | `${number}%`;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateY: undefined;
    } | {
        translateY: AnimatableNumericValue | `${number}%`;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
    } | {
        skewX: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        skewY: AnimatableStringValue;
    } & {
        matrix: undefined;
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        translateX: undefined;
        translateY: undefined;
    } | {
        matrix: AnimatableNumericValue[];
    } & {
        perspective: undefined;
        rotate: undefined;
        rotateX: undefined;
        rotateY: undefined;
        rotateZ: undefined;
        scale: undefined;
        scaleX: undefined;
        scaleY: undefined;
        skewX: undefined;
        skewY: undefined;
        translateX: undefined;
        translateY: undefined;
    })[];
    transformMatrix?: number[];
    transformOrigin?: string | (string | number)[];
    translateX?: AnimatableNumericValue;
    translateY?: AnimatableNumericValue;
}

Hierarchy (view full)

Properties

rotation? scaleX? scaleY? transform? transformMatrix? transformOrigin? translateX? translateY?

Properties

Optional rotation

rotation?: AnimatableNumericValue

Deprecated

Use rotate in transform prop instead.

Optional scaleX

scaleX?: AnimatableNumericValue

Deprecated

Use scaleX in transform prop instead.

Optional scaleY

scaleY?: AnimatableNumericValue

Deprecated

Use scaleY in transform prop instead.

Optional transform

transform?: string | ({
    perspective: AnimatableNumericValue;
} & {
    matrix: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotate: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotateX: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotateY: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    rotateZ: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    scale: AnimatableNumericValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    scaleX: AnimatableNumericValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    scaleY: AnimatableNumericValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    translateX: AnimatableNumericValue | `${number}%`;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateY: undefined;
} | {
    translateY: AnimatableNumericValue | `${number}%`;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
} | {
    skewX: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    skewY: AnimatableStringValue;
} & {
    matrix: undefined;
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    translateX: undefined;
    translateY: undefined;
} | {
    matrix: AnimatableNumericValue[];
} & {
    perspective: undefined;
    rotate: undefined;
    rotateX: undefined;
    rotateY: undefined;
    rotateZ: undefined;
    scale: undefined;
    scaleX: undefined;
    scaleY: undefined;
    skewX: undefined;
    skewY: undefined;
    translateX: undefined;
    translateY: undefined;
})[]

Optional transformMatrix

transformMatrix?: number[]

Deprecated

Use matrix in transform prop instead.

Optional transformOrigin

transformOrigin?: string | (string | number)[]

Optional translateX

translateX?: AnimatableNumericValue

Deprecated

Use translateX in transform prop instead.

Optional translateY

translateY?: AnimatableNumericValue

Deprecated

Use translateY in transform prop instead.

On This Page