properties
changelog

Transform Distance OR Perspective

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

Usage:

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

Reference

shilp.config.js
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;
backsidemove