What is transform?
The transform property applies visual transformations to an element — moving, rotating, scaling, or skewing it — without affecting the layout of surrounding elements.
Common Transform Functions
| Function | Effect |
|---|---|
| translate(x, y) | Moves the element |
| rotate(deg) | Rotates the element |
| scale(x, y) | Resizes the element |
| skew(x, y) | Slants the element along an axis |
translate and rotate
<style>
.box {
width: 80px;
height: 80px;
background: steelblue;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.moved {
transform: translate(30px, 10px);
}
.rotated {
transform: rotate(15deg);
}
</style>
<div style="display: flex; gap: 40px; padding: 10px;">
<div class="box moved">Moved</div>
<div class="box rotated">Rotated</div>
</div>scale on Hover
<style>
.scale-box {
width: 80px;
height: 80px;
background: crimson;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.scale-box:hover {
transform: scale(1.2);
}
</style>
<div class="scale-box">Hover</div>Combining Multiple Transforms
Multiple functions can be combined in a single transform declaration, applied in the order they’re written — transform: translateX(20px) rotate(10deg) first moves, then rotates.
Combined Transforms
.card {
transform: translateY(-4px) scale(1.03) rotate(1deg);
}The transform-origin Property
transform-origin controls the pivot point transforms are calculated from — by default the center of the element, but it can be moved to a corner or any custom point.
Changing the Rotation Origin
<style>
.swing {
width: 60px;
height: 60px;
background: #764ba2;
transform-origin: top left;
transform: rotate(20deg);
}
</style>
<div class="swing"></div>Transforms Don’t Affect Layout
Unlike changing width, top, or margin, a transform is purely visual — it doesn’t reflow surrounding content, which makes it ideal for smooth, performant animations.
Best Practice
Combine transform with transition for hover/focus effects instead of animating layout properties like top or width — it looks smoother and performs significantly better.