← Back to CSS Course | Chapter 8: Animations & Effects | Lesson 5 of 22

CSS Transforms

Imagine holding a flat postcard. You can slide the postcard across your desk (translate), spin it around like a clock hand (rotate), zoom it closer to your eyes to make it look bigger (scale), or twist its corners sideways (skew). CSS transform properties are those coordinate adjustments. They allow you to shift, rotate, scale, and skew your elements dynamically, changing how they display on the page without affecting surrounding elements.

In this page:

  1. Shifting Elements with translate
  2. Spinning Elements with rotate
  3. Resizing Elements with scale
  4. Twisting Elements with skew
  5. Combining Multiple Transforms
Syntax
css 
selector {
  transform: function(value);  /* translate(), rotate(), scale(), skew() */
}

Shifting Elements with translate

The translate() method moves an element from its normal position along the horizontal X-axis and vertical Y-axis, serving as a lightweight and high-performance way to offset layouts compared to using margins.

Note:
  • Use transform: translate() instead of absolute margins to build smooth, hardware-accelerated animations.
  • Accepted values:
  • translate(x, y) — moves the element
  • rotate(angle) — angle in deg, turn, or rad
  • scale(x, y) — number multipliers
  • skew(x, y) — angle distortion
  • matrix() — all 2D transforms in one function
  • none — no transform
Warning: Translated elements do not affect the normal page flow, so they can overlap with adjacent elements.

Example: Shifting Elements with translate

css 
<style>
.box {
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
.box:hover {
  transform: translate(20px, 10px);
}
</style>
<div class="box">Shifted right and down</div>

Spinning Elements with rotate

The rotate() method spins an element clockwise or counter-clockwise around its center point by a specified number of degrees (deg) or turns.

Note:
  • Use positive degrees to rotate clockwise, and negative degrees to rotate counter-clockwise.
  • Accepted values:
  • rotate(<angle>) — 2D rotation, clockwise when positive
  • rotate(45deg) — degrees
  • rotate(0.25turn) — turns, also rad and grad
  • rotateX() | rotateY() | rotateZ() — axis rotations
  • transform-origin — sets the pivot point
Warning: Rotating text containers can make the characters look blurry or jagged on some screens.

Example: Spinning Elements with rotate

css 
<style>
.box {
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
.box:hover {
  transform: rotate(45deg);
}
</style>
<div class="box">Rotated 45 degrees clockwise</div>

Resizing Elements with scale

The scale() method increases or decreases the display size of an element. It accepts multiplier values (like 1.5 to scale up to 150%, or 0.5 to scale down to 50%).

Note:
  • Use scale transforms inside hover states to build elegant card zoom transitions on your pages.
  • Accepted values:
  • scale(<number>) — uniform scale, 1 is unchanged
  • scale(x, y) — separate horizontal and vertical factors
  • scaleX(<number>) | scaleY(<number>) — one axis only
  • scale(-1) — a negative number mirrors the element
Warning: Scaling up raster images can make them look blurry and pixelated; use scalable vector SVGs instead.

Example: Resizing Elements with scale

css 
<style>
.box:hover {
  transform: scale(1.5);
}
</style>
<div class="box">Scaled up to 150%</div>

Twisting Elements with skew

The skew() method tilts an element along the X-axis or Y-axis by a specified angle. This creates a slanted, parallelogram-like effect, which is useful for creating dynamic background shapes and designs.

Note:
  • Pair skew transforms with hidden overflow containers to create sleek, angled layout divider shapes.
  • Accepted values:
  • skew(<angle>) — skews along the X axis
  • skew(x, y) — X and Y angles
  • skewX(<angle>) — horizontal skew only
  • skewY(<angle>) — vertical skew only
Warning: Skewing container cards will also skew all the text inside them, which can make it hard to read.

Example: Twisting Elements with skew

css 
<style>
.box {
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
.box:hover {
  transform: skew(20deg, 0deg);
}
</style>
<div class="box">Slanted along the X-axis</div>

Combining Multiple Transforms

You can apply multiple transform methods to a single element by writing them in a space-separated list inside the transform property, allowing you to combine translation, rotation, and scaling smoothly.

Note:
  • Write your transform methods in a single, space-separated list; do not declare the transform property multiple times.
  • Accepted values:
  • transform: A B C — space-separated list, applied right to left visually
  • none — no transform (default)
  • translate() rotate() scale() — the most common combination
  • matrix() — a single combined 2D matrix
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning: Writing multiple separate transform declarations will cause the later rules to completely overwrite the earlier ones.

Example: Combining Multiple Transforms

css 
<style>
.box {
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
.box:hover {
  transform: translate(10px, 10px) rotate(15deg) scale(1.1);
}
</style>
<div class="box">Translated, rotated, and scaled together</div>
Live Example
Related Topics

CSS Blend Modes · CSS Filters · CSS Shadows · CSS Transitions

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Writing multiple separate transform properties on an element, which causes later rules to overwrite earlier ones.
  2. Attempting to rotate or scale elements without realizing they do not affect surrounding page layouts.
  3. Applying extreme skew angles that tilt text containers past readability limits.
Chapter Summary
  • The transform property applies structural shifts, rotations, scaling, and skews to elements without affecting surrounding layouts.
  • Use translate() to offset elements, rotate() to spin them, scale() to resize them, and skew() to tilt them.
  • Combine multiple transform methods inside a single, space-separated list to animate elements smoothly.
Browser Support

Standard 2D CSS transforms are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Blend Modes Next Lesson → CSS 2D Transforms

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.