Element
Generated CSS
The CSS transform property lets you visually reposition, resize, rotate and distort elements without affecting document flow. Transforms are GPU-accelerated in all modern browsers, making them the preferred way to create performant animations and transitions.
Use the generator above to combine multiple transform functions interactively. Move the sliders to see how each function affects the element and copy the final CSS in one click.
The transform property accepts one or more functions separated by spaces. Multiple functions are applied right to left:
/* Single function */
.element { transform: rotate(45deg); }
/* Multiple functions — applied right to left */
.element { transform: translateX(50px) rotate(45deg) scale(1.2); }
/* 3D transforms require a perspective context */
.parent { perspective: 600px; }
.element { transform: rotateX(30deg) rotateY(20deg); }
rotate() rotates an element clockwise. Positive values = clockwise, negative = counter-clockwise. rotateX() and rotateY() create 3D tilting effects and require a perspective value on a parent element to look correct:
.spin { transform: rotate(45deg); }
.flip-h { transform: rotateY(180deg); }
.tilt-3d { transform: perspective(600px) rotateX(30deg); }
scale() resizes an element around its transform origin. A value of 1 is normal size, 2 is double, 0.5 is half. Setting a negative value creates a mirror flip — a common technique for icon buttons:
.double { transform: scale(2); }
.half { transform: scale(0.5); }
.mirror { transform: scaleX(-1); } /* horizontal flip */
.flip-v { transform: scaleY(-1); } /* vertical flip */
translate() moves an element without affecting surrounding layout — unlike margin or position which shift other elements. This makes it the best option for hover lift effects and animation offsets. Using percentage values translates relative to the element's own size, which is useful for centering tricks:
/* Move right 50px and down 20px */
.element { transform: translate(50px, 20px); }
/* Classic centering with absolute position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
skew() shears an element along the X and/or Y axis. It's often used for decorative section dividers, parallelogram shapes, and italic-style hero text backgrounds:
.parallelogram { transform: skewX(-15deg); }
.slanted-bg::before {
content: '';
position: absolute;
inset: 0;
background: var(--accent);
transform: skewY(-3deg);
z-index: -1;
}
The transform-origin property sets the pivot point for all transforms. Default is 50% 50% (center). Using top left makes elements rotate from their corner — a common technique for fold-out menus and card flip effects:
.card { transform-origin: top left; }
.door { transform-origin: left center; }
.pendulum { transform-origin: top center; }
CSS transforms become most powerful when combined with transition for hover effects or @keyframes for looping animations. Always animate transform (and opacity) rather than top/left/margin — transforms are GPU-accelerated and won't cause layout reflow:
/* Hover lift effect */
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}
/* Spin animation */
.icon {
animation: spin 2s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
For more on transitions and animations, see our CSS transitions guide and the CSS Animation Generator.
The transform property is supported in all modern browsers without vendor prefixes. 3D transforms using rotateX(), rotateY() and perspective() are also universally supported since 2015. The individual transform property syntax (rotate: 45deg instead of transform: rotate(45deg)) is newer (2022) and may need checking for older browser support.
No — transforms are purely visual. A scaled or translated element takes up the same space in the layout as if no transform were applied. This is different from changing width, height, or margin, which do affect surrounding elements.
Animating transform runs on the GPU compositor thread, which means it does not cause layout recalculation (reflow) on every frame. Animating top, left, width or margin triggers a full layout pass every frame, which can cause jank at 60fps. Always prefer transform and opacity for animations.
Use transform: scaleX(-1) — this is the simplest and most performant approach. It's widely used for "back" arrow icons so you only need one SVG asset. You can also use rotateY(180deg) for the same visual result.
transform-origin sets the anchor point for all transforms. When you rotate an element, it rotates around this point. The default is 50% 50% (center). Setting it to top left makes the element rotate from its corner — critical for fold-out menus, hinged cards, and accordion-style animations.
The classic technique: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);. The percentage values in translate are relative to the element's own size, not the parent — so this offsets by exactly half the element's width and height, perfectly centering it regardless of dimensions.
Yes — transforms are CSS properties and work the same in any framework. In React, control the transform via state and style prop. In Vue, use :style binding. For complex sequence animations, consider CSS @keyframes with class toggling, or the Web Animations API (element.animate()) for JavaScript-driven control. See our CSS Animation Generator for keyframe patterns.
Ready to animate your transforms? Try the CSS Animation Generator for keyframe control, or read our CSS transitions guide for hover and interaction patterns.