CSS Transforms: translate, rotate, scale and skew

CSS transforms move, rotate, resize and slant elements without affecting the layout around them. Learn translate, rotate, scale, skew and a 3D flip card.

What is a CSS transform?

The transform property changes how an element is drawn on screen. It can move it, turn it, make it bigger or smaller, or slant it. The important part: the element's original space in the layout stays the same. Other elements do not move out of the way.

Imagine a photo on a corkboard. A transform is like picking up the photo and tilting it. The pin hole, its "spot" on the board, stays where it was.

This is why transforms are so good for animation. The browser does not need to recalculate the layout of the page.

The four 2D transform functions

Function	What it does	Example
translate(x, y)	Moves the element	translate(20px, -10px)
rotate(angle)	Turns the element	rotate(45deg)
scale(x, y)	Resizes the element	scale(1.2)
skew(x, y)	Slants the element	skew(10deg)

There are also one-direction versions, like translateX(), translateY(), scaleX() and skewY().

<div class="demo">
  <div class="shape move">translate</div>
  <div class="shape turn">rotate</div>
  <div class="shape grow">scale</div>
  <div class="shape slant">skew</div>
</div>

.demo {
  display: flex;
  gap: 2rem;
  padding: 3rem;
}

.shape {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  background: #4f46e5;
  color: white;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
}

.move  { transform: translate(10px, 20px); }
.turn  { transform: rotate(15deg); }
.grow  { transform: scale(1.2); }
.slant { transform: skew(-10deg); }

You will see four purple squares. The first is shifted down and right, the second is tilted, the third is 20% bigger, and the fourth leans like italic text. Notice that the gaps between them do not change.

Tip: translate with a percentage uses the element's own size. translate(-50%, -50%) moves an element back by half its own width and height. That is why it is used with position: absolute to center things.

How does transform-origin work?

Every transform happens around a point called the origin. By default it is the center of the element. You can change it with transform-origin.

.door {
  width: 120px;
  height: 200px;
  background: #92400e;
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.door:hover {
  transform: rotate(-10deg);
}

Because the origin is on the left edge, the shape swings like a door on its hinges instead of spinning around its middle. You can use keywords (top, right, bottom left), percentages or lengths.

Combining multiple transforms

You can list several functions in one transform, separated by spaces:

.badge:hover {
  transform: translateY(-4px) rotate(-3deg) scale(1.05);
}

The order matters. The browser applies them from right to left, and each one changes the direction of the next. rotate(45deg) translateX(100px) moves the element along the rotated direction, which gives a different result than translateX(100px) rotate(45deg).

Common mistake: Writing two transform declarations, like transform: rotate(10deg); and then transform: scale(2);. The second one replaces the first. Put both functions in one declaration.

Modern CSS also has separate translate, rotate and scale properties, like rotate: 10deg;. They are handy when you want to change one part without rewriting the others.

Intro to 3D transforms: a flip card

Transforms can work in 3D too. You need three helpers:

• perspective on the parent: how far away the viewer is. Smaller values give a stronger 3D effect.
• transform-style: preserve-3d on the element that rotates, so its children stay in 3D space.
• backface-visibility: hidden on each face, so you cannot see a face from behind.

<div class="flip-card">
  <div class="flip-card__inner">
    <div class="flip-card__face flip-card__front">
      <h3>What is CSS?</h3>
    </div>
    <div class="flip-card__face flip-card__back">
      <p>The language that styles web pages.</p>
    </div>
  </div>
</div>

.flip-card {
  width: 260px;
  height: 160px;
  perspective: 800px;
}

.flip-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-card:hover .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: 12px;
  backface-visibility: hidden;
  font-family: system-ui, sans-serif;
}

.flip-card__front {
  background: #4f46e5;
  color: white;
}

.flip-card__back {
  background: #fde68a;
  color: #1f2937;
  transform: rotateY(180deg);
}

When you hover the card, it flips around its vertical axis and shows the answer on the back. The back face starts already turned 180 degrees, so after the flip it faces you.

Practice exercise

Make a row of three social media icons (simple colored circles are fine). On hover, each should rotate 360 degrees and scale up to 1.15 at the same time, smoothly.

Hint: Combine rotate() and scale() in one transform, and add a transition on transform to the normal state.

Key takeaways

• transform changes how an element looks without moving other elements.
• The main 2D functions are translate(), rotate(), scale() and skew().
• transform-origin sets the point the transform happens around.
• Combine functions in one transform declaration; the order changes the result.
• 3D effects need perspective, transform-style: preserve-3d and often backface-visibility: hidden.