Last updated
Transform-Origin Examples
transform-origin: center— default, rotates/scales around the element's centertransform-origin: top left— rotates around the top-left corner (useful for fold effects)transform-origin: bottom center— scales from the bottom (useful for growing-up effects)transform-origin: 50% 0— rotates around the top-center (useful for pendulum effects)
Performance Note
- Prefer
transformandopacityfor animations — they are GPU-composited and do not trigger layout reflow - Avoid animating
width,height,top,left, ormargin— these trigger expensive layout recalculations - Use
will-change: transformon elements that will animate to hint the browser to promote them to their own compositor layer
Use the CSS Transform Generator at techconverter.me to configure any combination of 2D and 3D transforms visually, adjust transform-origin, and copy the generated CSS directly into your project.
Examples
Example 1: Simple Hover Lift Effect (Translation)
A card that moves up slightly on hover is one of the most common UI interactions. Configure a translateY transform:
- translateY: -8px
Generated CSS:
.card {
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-8px);
}
The negative Y value moves the element upward. Combined with a box-shadow transition, this creates a convincing lift effect. Because transforms do not affect document flow, no layout reflow occurs during the animation.
Example 2: Rotate an Icon on Hover
A dropdown arrow that rotates 180 degrees when the menu opens:
.dropdown-arrow {
transition: transform 0.3s ease;
}
.dropdown.open .dropdown-arrow {
transform: rotate(180deg);
}
Configure in the generator: rotate = 180deg. The rotation happens around the element's center by default. The generator's transform-origin control lets you change the pivot point if needed.
Example 3: Scale on Hover for Buttons and Images
A subtle scale effect on hover makes interactive elements feel responsive:
.btn {
transition: transform 0.15s ease;
}
.btn:hover {
transform: scale(1.05);
}
.btn:active {
transform: scale(0.97);
}
The active state scale-down (0.97) simulates a physical press. Configure scale = 1.05 for hover and scale = 0.97 for active in the generator.