Transform Distance OR Perspective

Set translation distance (perspective) for transform positioning, movement and origin.

Usage:

@adjust distance-*;
@adjust distance-origin-*;

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: {
      distance: {
        DEFAULT: {
          property: "--dst: perspective(<v>)<i>;",
          values: {
            none: "none",
            dramatic: "100px",
            near: "300px",
            normal: "500px",
            midrange: "800px",
            distant: "1200px",
          },
        },

        origin: {
          property: "perspective-origin: <n><v><i>;",
          resolve: "rawSpacing",
          themeKey: "spacingPixels",
          values: {
            // perspective-origin: x y;
            center: "center",
            right: "right",
            left: "left",
            top: {
              DEFAULT: "top",
              left: "left top",
              right: "right top",
            },
            bottom: {
              DEFAULT: "bottom",
              left: "left bottom",
              right: "right bottom",
            },
          },
        },
      },
    },
  },
};

export default shilpConfig;