Transforms
Move, rotate, scale, and skew elements.
Syntax
transform: rotate(15deg) scale(1.2);The transform property changes an element's shape or position without affecting the surrounding layout:
translate(x, y)— move.rotate(deg)— rotate.scale(n)— resize.skew(deg)— slant.
You can combine several functions in one declaration.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer uses transform: translateX(-50%) translateY(-50%) to precisely center an absolutely positioned element without knowing its dimensions.
- A designer uses transform: scale(1.05) on a product card hover to give a subtle zoom effect that draws attention.
- A developer uses transform: rotate(45deg) on a div to create a diamond shape without additional HTML elements.
More examples
Translate for pixel-perfect centering
Positions the modal at the 50% point then shifts it back by half its own size to achieve true centering.
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 32px;
border-radius: 8px;
}Scale and rotate on hover
Combines scale and rotate on hover for a playful wiggle, then scales down on active to simulate a press.
.icon-btn {
transition: transform 0.2s ease;
}
.icon-btn:hover {
transform: scale(1.15) rotate(8deg);
}
.icon-btn:active {
transform: scale(0.95);
}3D card flip with rotateY
Creates a 3D card flip using perspective, transform-style, and rotateY to reveal a back face on hover.
.flip-card { perspective: 800px; }
.flip-inner {
transform-style: preserve-3d;
transition: transform 0.5s ease;
}
.flip-card:hover .flip-inner {
transform: rotateY(180deg);
}
.flip-back {
transform: rotateY(180deg);
backface-visibility: hidden;
position: absolute; inset: 0;
}
Discussion