Tutorial 38 of 44 in series

CSS Transforms

Move, rotate, scale, and skew elements

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

86%

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.

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development