Transforms
The transform property lets you modify the position, size, and shape of elements in 2D or 3D space.
Demo: Transform Examples
HTML
<div class="transform-grid">
<div class="card"><div class="box original">Original</div></div>
<div class="card"><div class="box rotated">Rotate(45deg)</div></div>
<div class="card"><div class="box scaled">Scale(1.2)</div></div>
<div class="card"><div class="box skewed">SkewX(20deg)</div></div>
<div class="card"><div class="box translated">Translate(10px, 10px)</div></div>
</div> CSS
.transform-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.card { text-align: center; }
.box {
width: 100px;
height: 80px;
background: #6366f1;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.65rem;
border-radius: 6px;
}
.rotated { transform: rotate(45deg); }
.scaled { transform: scale(1.2); }
.skewed { transform: skewX(20deg); }
.translated { transform: translate(10px, 10px); }Live Output Window
Transform Functions
| Function | Effect |
|---|---|
translate(x, y) | Move element |
translateX(n) | Move horizontally |
translateY(n) | Move vertically |
rotate(deg) | Rotate around center |
scale(n) | Scale size |
scaleX(n) | Scale horizontally |
scaleY(n) | Scale vertically |
skew(deg) | Skew element |
matrix(a, b, c, d, e, f) | Combine all transforms |
Multiple Transforms
.element {
transform: translateX(20px) rotate(45deg) scale(1.1);
}
Transform Origin
Control the pivot point of the transform:
Demo: Transform Origin
HTML
<div class="origin-demo">
<div class="pivot top-left">top-left</div>
<div class="pivot center">center</div>
<div class="pivot bottom-right">bottom-right</div>
</div> CSS
.origin-demo { display: flex; gap: 40px; padding: 20px; }
.pivot {
width: 80px;
height: 80px;
background: #6366f1;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.6rem;
text-align: center;
border-radius: 4px;
}
.top-left { transform-origin: top left; transform: rotate(20deg); }
.center { transform-origin: center; transform: rotate(20deg); }
.bottom-right { transform-origin: bottom right; transform: rotate(20deg); }Live Output Window
Transform does not affect document flow — neighboring elements stay in place.