CSS Individual Transform Properties: translate, rotate, scale

CSS now supports translate, rotate, and scale as first-class individual properties, separate from the transform shorthand. This means you can animate each transform independently with different durations, easings, and delays — and combine CSS-driven transforms with JavaScript-driven ones on the same element without conflicts.

Problem: CSS transforms written as a single transform property — transform: translateX(50px) rotate(45deg) scale(1.2) — cannot be animated independently: animating scale resets the translate and rotate values in the same property.

Solution: Use the individual transform properties translate, rotate, and scale (CSS Transforms Level 2). Each can be transitioned or animated independently in a single @keyframes or transition declaration without affecting the others. They apply in a defined order (translate → rotate → scale) before any transform property.

The examples below animate card hover effects with independent transform properties, combine CSS animation with JavaScript translate, and show the compositing performance benefit of individual transform properties.

/* ── INDIVIDUAL TRANSFORM PROPERTIES ── */

/* OLD WAY: single transform shorthand — animating one property resets the others */
.card-old {
    transform: translateY(0) scale(1) rotate(0deg);
    transition: transform 0.3s ease;
}
.card-old:hover {
    transform: translateY(-8px) scale(1.02) rotate(0deg); /* all or nothing */
}

/* NEW WAY: each property is independent */
.card {
    translate: 0 0;           /* independent from scale and rotate */
    scale: 1;
    rotate: 0deg;

    /* Different timing for each transform */
    transition:
        translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),  /* springy bounce */
        scale     0.2s ease,
        rotate    0.4s ease;
}

.card:hover {
    translate: 0 -8px;        /* doesn't affect scale or rotate */
    scale: 1.02;
}

.card:active {
    scale: 0.98;              /* press effect — doesn't reset translate */
}

/* ── STAGGERED ANIMATION WITH INDIVIDUAL PROPERTIES ── */
.menu-item {
    translate: -20px 0;
    opacity: 0;
    transition:
        translate 0.4s ease,
        opacity   0.4s ease;
}

.menu-item.is-visible {
    translate: 0 0;
    opacity: 1;
}

/* Stagger using :nth-child */
.menu-item:nth-child(1) { transition-delay: 0ms; }
.menu-item:nth-child(2) { transition-delay: 60ms; }
.menu-item:nth-child(3) { transition-delay: 120ms; }
.menu-item:nth-child(4) { transition-delay: 180ms; }

Combine CSS animation with JavaScript-driven translate on the same element:

// KEY BENEFIT: CSS and JS can control different transform properties simultaneously
// CSS controls rotate (spin animation); JS controls translate (drag position)

const card = document.querySelector('.card');

// CSS handles the rotation animation — defined in stylesheet:
// @keyframes spin { to { rotate: 360deg; } }
// .card { animation: spin 4s linear infinite; }

// JavaScript handles drag position using translate (doesn't conflict with CSS rotate!)
let isDragging = false;
let startX = 0, startY = 0;
let currentX = 0, currentY = 0;

card.addEventListener('pointerdown', e => {
    isDragging = true;
    startX = e.clientX - currentX;
    startY = e.clientY - currentY;
    card.setPointerCapture(e.pointerId);
});

card.addEventListener('pointermove', e => {
    if (!isDragging) return;
    currentX = e.clientX - startX;
    currentY = e.clientY - startY;
    // Setting translate via style doesn't affect CSS-animated rotate
    card.style.translate = `${currentX}px ${currentY}px`;
});

card.addEventListener('pointerup', () => {
    isDragging = false;
    // Snap back to origin
    card.style.translate = '0 0';  // triggers the transition defined in CSS
});

// Without individual properties, setting transform in JS would cancel the CSS animation:
// card.style.transform = `translate(${x}px, ${y}px)`;  // BREAKS the rotate animation!

NOTE: Individual transform properties are supported in all modern browsers (Chrome 104+, Firefox 103+, Safari 14.1+). They always apply in the order translate → rotate → scale, regardless of the order you declare them in CSS — this is different from the transform shorthand where order matters. Use individual properties in all new WordPress theme CSS for cleaner, more maintainable animation code.