meo-canvas - v9.0.2
    Preparing search index...

    Interface TransformProps

    A 2D transform applied to a node and everything inside it, after the layout has placed it.

    The parts compose as the CSS transform list scale() rotate() translate(), in that order and about TransformProps.originX and TransformProps.originY. Each is written in the coordinate system the ones before it left behind, so a translation carries the scale and the rotation with it: { scale: 2, translateY: 30 } moves the node 60 pixels down the page, and { rotate: 90, translateX: 30 } moves it 30 pixels down rather than across.

    Lengths are resolved against the node's untransformed border box, which is what CSS resolves them against too: translateY: '60%' of a 50-tall node is 30 before any scale reaches it.

    interface TransformProps {
        originX?: number | `${number}%`;
        originY?: number | `${number}%`;
        rotate?: number;
        scale?: number;
        scaleX?: number;
        scaleY?: number;
        translateX?: number | `${number}%`;
        translateY?: number | `${number}%`;
    }
    Index
    originX? originY? rotate? scale? scaleX? scaleY? translateX? translateY?
    originX?: number | `${number}%`

    The horizontal origin point for transformations (rotate, scale).

    Pixels from the left edge if it's number, percentage of the node's width if it's string.

    '50%' (center)
    originY?: number | `${number}%`

    The vertical origin point for transformations (rotate, scale).

    Pixels from the top edge if it's number, percentage of the node's height if it's string.

    '50%' (center)
    rotate?: number

    Rotation around the transform origin.

    Angle in degrees. Positive values rotate clockwise.

    undefined (no rotation)
    scale?: number

    Uniform scaling factor (applied to both X and Y axes). A value of 1 means no scaling, 2 means double size, 0.5 means half-size. This value is overridden by scaleX and scaleY if they are also provided.

    undefined (no scaling, effectively 1)
    scaleX?: number

    Horizontal scaling factor. Overrides the X component of scale if provided.

    undefined (no scaling, effectively 1)
    scaleY?: number

    Vertical scaling factor. Overrides the Y component of scale if provided.

    undefined (no scaling, effectively 1)
    translateX?: number | `${number}%`

    Horizontal translation (movement along the X-axis), applied last in the chain and so carrying whatever scale and rotate did before it.

    Pixels if it's number, percentage of the node's width if it's string (e.g., '10%').

    undefined (no translation)
    translateY?: number | `${number}%`

    Vertical translation (movement along the Y-axis), applied last in the chain and so carrying whatever scale and rotate did before it.

    Pixels if it's number, percentage of the node's height if it's string (e.g., '10%').

    undefined (no translation)

    Settings
    Member Visibility

    On This Page
    Properties