Scale Transform

Scale elements larger or smaller using transform properties.

Usage:

@adjust scale-*;
@adjust scale-3d-*;
@adjust scale-x-*;
@adjust scale-y-*;
@adjust scale-z-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  properties: {
    adjust: {
      scale: {
        DEFAULT: {
          property: "--scl: scale(<n><v>, <n><v>)<i>;",
          themeKey: "fractions",
          values: {
            DEFAULT: "1.1",
          },
        },

        "3d": {
          property: "--scl: scale3d(<n><v>, <n><v>, <n><v>)<i>;",
          themeKey: "fractions",
          values: {
            DEFAULT: "1.1",
          },
        },

        x: {
          property: "--scl-x: scaleX(<n><v>)<i>;",
          themeKey: "fractions",
          values: {
            DEFAULT: "1.1",
          },
        },

        y: {
          property: "--scl-y: scaleY(<n><v>)<i>;",
          themeKey: "fractions",
          values: {
            DEFAULT: "1.1",
          },
        },

        z: {
          property: "--scl-z: scaleZ(<n><v>)<i>;",
          themeKey: "fractions",
          values: {
            DEFAULT: "1.1",
          },
        },
      },
    },
  },
};

export default shilpConfig;