properties
changelog

Rotate Transform

Apply rotation transforms to elements in 2D or 3D space.

Usage:

  • @adjust rotate-*;
  • @adjust rotate-3d-*;
  • @adjust rotate-x-*;
  • @adjust rotate-y-*;
  • @adjust rotate-z-*;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		adjust: {
			rotate: {
				DEFAULT: {
					property: "--rtt: rotate(<n><v>, <n><v>)<i>;",
					themeKey: "angles",
					values: {},
				},

				"3d": {
					property: "--rtt: rotate3d(<n><v>, <n><v>, <n><v>)<i>;",
					themeKey: "angles",
					values: {},
				},

				x: {
					property: "--rtt-x: rotateX(<n><v>)<i>;",
					themeKey: "angles",
					values: {},
				},

				y: {
					property: "--rtt-y: rotateY(<n><v>)<i>;",
					themeKey: "angles",
					values: {},
				},

				z: {
					property: "--rtt-z: rotateZ(<n><v>)<i>;",
					themeKey: "angles",
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;
presetscale