Transforms 1.2.2

Transform and transform-origin helpers. Deutsch: Transformationen

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Translate/scale/rotate decorative elements with transform utilities.

When not

Do not convey meaning with transforms alone.

Rotate

.velin-rotate-45, .velin-rotate-90, .velin-rotate-180, .-velin-rotate-90, .-velin-rotate-180

Scale

.velin-scale-75 through .velin-scale-125

Translate

.velin-translate-y-1, .velin-translate-y-2, .-velin-translate-y-1, .-velin-translate-y-2

Origins: .velin-origin-center, .velin-origin-top, .velin-origin-bottom

Skew

.velin-skew-x-3, .velin-skew-y-3 (and related steps in generated reference).

Preview

<div class="velin-bg-primary velin-rounded velin-p-3 velin-rotate-12"></div>
<div class="velin-bg-primary velin-rounded velin-p-3 velin-scale-125"></div>

See also generated/utilities/position.md for transform-related tokens.