CSS · Animations & Effects

CSS Transforms

Move, rotate, scale, and skew elements in 2D space

Find videos you like?

Save to resource drawer for future reference!

CSS Transforms

2D transformations

Transform = Shape & Position

Transforms let you modify elements without affecting document flow. Perfect for animations, hover effects, and creating dynamic interfaces. Combine with transitions for smooth effects!

Translate

Move

Rotate

Spin

Scale

Resize

Skew

Tilt

Transform Functions

Four main transform types

translate()

Move elements horizontally and/or vertically

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

✨ Doesn't affect other elements - great for positioning!

rotate()

Spin elements clockwise or counter-clockwise

transform: rotate(45deg);
transform: rotate(-90deg);

✨ Positive = clockwise, Negative = counter-clockwise

scale()

Resize elements (1 = original size)

transform: scale(1.5); /* 150% */  
transform: scale(0.5); /* 50% */   
transform: scaleX(2); /* Width only */

✨ Perfect for hover effects!

skew()

Tilt elements along X or Y axis

transform: skew(20deg);
transform: skewX(20deg);
transform: skewY(20deg);

✨ Less common but creates interesting effects

Interactive Transform Demo

Hover to see transforms in action

Transform Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Hover Each Card!</h1>
      <div class="grid">
        <div class="card translate">
          Translate
          <span class="label">Moves up</span>
        </div>
        <div class="card rotate">
          Rotate
          <span class="label">Spins</span>
        </div>
        <div class="card scale">
          Scale
          <span class="label">Gets bigger</span>
        </div>
        <div class="card skew">
          Skew
          <span class="label">Tilts</span>
        </div>
        <div class="card combo">
          Combined
          <span class="label">Multiple transforms!</span>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Combining Transforms

Multiple transforms in one property

/* Space-separated transforms */
transform: translateX(50px) rotate(45deg) scale(1.2);

/* Order matters! */
transform: scale(2) rotate(45deg); /* Different result */
transform: rotate(45deg) scale(2); /* Than this */

Order matters! Transforms are applied left to right, and the order changes the final result.

Transform Origin

Change the pivot point

The transform-origin property sets the point around which transformations happen.

center

Middle (default)

top left

Top-left corner

bottom right

Bottom-right corner

Remember

translate() - Move elements

rotate() - Spin elements (degrees)

scale() - Resize (1 = original)

Combine with transition for smooth effects!

Previous Topic

Animations

Keyframe animations (@keyframes), animation properties, iteration count, direction, and fill-mode.

Next Topic

Filters

blur(), brightness(), contrast(), grayscale(), hue-rotate(), saturate(), sepia(), drop-shadow().

Ask a Question

Have a question about Transforms? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Animations & Effects

CSS Transforms

Move, rotate, scale, and skew elements in 2D space

Find videos you like?

Save to resource drawer for future reference!

CSS Transforms

2D transformations

Transform = Shape & Position

Transforms let you modify elements without affecting document flow. Perfect for animations, hover effects, and creating dynamic interfaces. Combine with transitions for smooth effects!

Translate

Move

Rotate

Spin

Scale

Resize

Skew

Tilt

Transform Functions

Four main transform types

translate()

Move elements horizontally and/or vertically

transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);

✨ Doesn't affect other elements - great for positioning!

rotate()

Spin elements clockwise or counter-clockwise

transform: rotate(45deg);
transform: rotate(-90deg);

✨ Positive = clockwise, Negative = counter-clockwise

scale()

Resize elements (1 = original size)

transform: scale(1.5); /* 150% */  
transform: scale(0.5); /* 50% */   
transform: scaleX(2); /* Width only */

✨ Perfect for hover effects!

skew()

Tilt elements along X or Y axis

transform: skew(20deg);
transform: skewX(20deg);
transform: skewY(20deg);

✨ Less common but creates interesting effects

Interactive Transform Demo

Hover to see transforms in action

Transform Examples

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>🎨 Hover Each Card!</h1>
      <div class="grid">
        <div class="card translate">
          Translate
          <span class="label">Moves up</span>
        </div>
        <div class="card rotate">
          Rotate
          <span class="label">Spins</span>
        </div>
        <div class="card scale">
          Scale
          <span class="label">Gets bigger</span>
        </div>
        <div class="card skew">
          Skew
          <span class="label">Tilts</span>
        </div>
        <div class="card combo">
          Combined
          <span class="label">Multiple transforms!</span>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Combining Transforms

Multiple transforms in one property

/* Space-separated transforms */
transform: translateX(50px) rotate(45deg) scale(1.2);

/* Order matters! */
transform: scale(2) rotate(45deg); /* Different result */
transform: rotate(45deg) scale(2); /* Than this */

Order matters! Transforms are applied left to right, and the order changes the final result.

Transform Origin

Change the pivot point

The transform-origin property sets the point around which transformations happen.

center

Middle (default)

top left

Top-left corner

bottom right

Bottom-right corner

Remember

translate() - Move elements

rotate() - Spin elements (degrees)

scale() - Resize (1 = original)

Combine with transition for smooth effects!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Animations

Filters

Building Your Learning Module...

CSS Transforms

Transform = Shape & Position

Translate

Rotate

Scale

Skew

Transform Examples

Remember

Animations

Filters

CSS Transforms

Transform = Shape & Position

Translate

Rotate

Scale

Skew

Transform Examples

Remember