Styleframe Logo
Utilities

Transforms

Create transform utilities for rotate, scale, translate, skew, and perspective with full type safety.

Overview

Transform utilities help you manipulate elements visually through rotation, scaling, translation, and skewing. These utilities support both 2D and 3D transformations.

Why Use Transform Utilities?

Transform utilities help you:

  • Create animations: Build smooth animations by transforming element properties
  • Enhance interactions: Add hover effects with scale and rotation
  • Position elements: Use translate for precise positioning without affecting layout
  • Enable 3D effects: Create depth with perspective and 3D transforms

useRotateUtility

The useRotateUtility() function creates utility classes for rotating elements.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useRotateUtility } from "@styleframe/theme";

const s = styleframe();

useRotateUtility(s, {
    '0': '0deg',
    '1': '1deg',
    '2': '2deg',
    '3': '3deg',
    '6': '6deg',
    '12': '12deg',
    '45': '45deg',
    '90': '90deg',
    '180': '180deg',
});

export default s;
Pro tip: Transform utilities use CSS custom properties, allowing you to combine multiple transforms (rotate + scale + translate) on the same element.

useScaleUtility

The useScaleUtility() function creates utility classes for scaling elements.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useScaleUtility, useScaleXUtility, useScaleYUtility } from "@styleframe/theme";

const s = styleframe();

const scaleValues = {
    '0': '0',
    '50': '.5',
    '75': '.75',
    '90': '.9',
    '95': '.95',
    '100': '1',
    '105': '1.05',
    '110': '1.1',
    '125': '1.25',
    '150': '1.5',
};

useScaleUtility(s, scaleValues);    // Both X and Y
useScaleXUtility(s, scaleValues);   // X axis only
useScaleYUtility(s, scaleValues);   // Y axis only

export default s;

useTranslateUtility

The useTranslateUtility() function creates utility classes for moving elements.

styleframe.config.ts
import { styleframe } from "styleframe";
import { useTranslateXUtility, useTranslateYUtility } from "@styleframe/theme";

const s = styleframe();

const translateValues = {
    '0': '0px',
    '1': '0.25rem',
    '2': '0.5rem',
    '4': '1rem',
    '8': '2rem',
    '1/2': '50%',
    full: '100%',
};

useTranslateXUtility(s, translateValues);
useTranslateYUtility(s, translateValues);

export default s;

More Transform Utilities

useSkewXUtility & useSkewYUtility

Skew elements along the X or Y axis.

useSkewXUtility(s, {
    '0': '0deg',
    '1': '1deg',
    '2': '2deg',
    '3': '3deg',
    '6': '6deg',
    '12': '12deg',
});

useSkewYUtility(s, {
    '0': '0deg',
    '1': '1deg',
    '2': '2deg',
    '3': '3deg',
    '6': '6deg',
    '12': '12deg',
});

useTransformOriginUtility

Set the origin point for transforms.

useTransformOriginUtility(s, {
    center: 'center',
    top: 'top',
    'top-right': 'top right',
    right: 'right',
    'bottom-right': 'bottom right',
    bottom: 'bottom',
    'bottom-left': 'bottom left',
    left: 'left',
    'top-left': 'top left',
});

usePerspectiveUtility

Add 3D perspective to transform containers.

usePerspectiveUtility(s, {
    none: 'none',
    '100': '100px',
    '200': '200px',
    '500': '500px',
    '1000': '1000px',
});

useBackfaceVisibilityUtility

Control visibility of element backfaces in 3D transforms.

useBackfaceVisibilityUtility(s, {
    visible: 'visible',
    hidden: 'hidden',
});

Examples

Hover Scale Effect

styleframe.config.ts
import { styleframe } from "styleframe";
import { useScaleUtility } from "@styleframe/theme";

const s = styleframe();
const { modifier } = s;

const hover = modifier('hover', ({ declarations }) => ({
    '&:hover': declarations,
}));

useScaleUtility(s, {
    '100': '1',
    '105': '1.05',
});

// Apply scale on hover
useScaleUtility(s, { '105': '1.05' }, [hover]);

export default s;

Usage in HTML:

<div class="_scale:100 _hover:scale:105" style="transition: transform 0.2s;">
    Hover to scale
</div>

Centering with Translate

styleframe.config.ts
import { styleframe } from "styleframe";
import { useTranslateXUtility, useTranslateYUtility } from "@styleframe/theme";
import { usePositionUtility, useTopUtility, useLeftUtility } from "@styleframe/theme";

const s = styleframe();

usePositionUtility(s, { absolute: 'absolute' });
useTopUtility(s, { '1/2': '50%' });
useLeftUtility(s, { '1/2': '50%' });
useTranslateXUtility(s, { '-1/2': '-50%' });
useTranslateYUtility(s, { '-1/2': '-50%' });

export default s;

Usage in HTML:

<div style="position: relative; height: 200px;">
    <div class="_position:absolute _top:1/2 _left:1/2 _translate-x:-1/2 _translate-y:-1/2">
        Centered element
    </div>
</div>

Best Practices

  • Use transforms for animations: Transform properties are GPU-accelerated and perform well
  • Add transitions for smooth effects: Combine with transition utilities for animated transforms
  • Set transform-origin for rotations: Adjust the pivot point when rotating elements
  • Consider performance: Multiple complex transforms can impact performance
  • Use translate for positioning: Unlike margin/position changes, translate doesn't trigger layout

FAQ

Tables

Create table utilities for border collapse, spacing, layout, and caption positioning with full type safety.

Transitions & Animation

Create transition and animation utilities for smooth state changes and motion effects with full type safety.