LuisLlamas Logo
css-transformaciones-2d-3d

2D and 3D CSS Transformations for Visual Effects

  • 5 min
  • Intermediate

A CSS transformation is a visual modification that does not alter the layout, even if it moves, rotates, scales, or distorts an element.

Sometimes changing a color or adding a shadow isn’t enough. We want a button to lift slightly on hover, a card to tilt, an icon to spin, or an element to appear sliding in from the side.

That’s what the transform property is for, one of the most rewarding in CSS. It’s powerful, fast, and widely used in animations because it allows you to change an element’s appearance without forcing the browser to re-layout the entire page.

Transforming is not repositioning

This point is important. When we use transform, the element changes visually, but its original space in the layout remains where it was.

.box {
  transform: translateX(40px);
}
Copied!

The box is drawn 40 pixels to the right, but for other elements, it still occupies its original spot. It doesn’t push its neighbors, doesn’t recalculate the row, doesn’t change the normal document flow.

Fundamental 2D Transformations

The transform property accepts functions. Each function applies a different operation to the element.

Moving an element

translate() visually shifts an element on the X and/or Y axis.

.moved {
  transform: translate(50px, -20px);
}

.lift-a-bit {
  transform: translateY(-0.25rem);
}
Copied!

It’s ideal for entrance animations, buttons that elevate, and small displacements.

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}
Copied!

Changing visual size

scale() increases or decreases the apparent size of the element.

.zoom {
  transform: scale(1.2);
}

.small {
  transform: scale(0.8);
}
Copied!

1 is the original size. 1.2 means 20% larger. 0.8 means 20% smaller.

We can also scale each axis separately.

.stretched {
  transform: scaleX(1.5);
}

.squashed {
  transform: scaleY(0.6);
}
Copied!

Rotating

rotate() spins the element. We usually use degrees (deg).

.tilted {
  transform: rotate(15deg);
}

.flipped {
  transform: rotate(-90deg);
}
Copied!

Positive values rotate clockwise. Negative values rotate counter-clockwise.

Skewing/Distorting

skew() tilts the element on one or two axes.

.skewed {
  transform: skewX(-12deg);
}
Copied!

It’s used less than translate, scale, or rotate, but it can be useful for labels, tilted backgrounds, or specific graphic effects.

Combining Transformations

It’s very common to want to move, scale, and rotate at the same time. We shouldn’t write transform multiple times, because the last declaration overrides the previous ones.

/* Bad: only rotate is applied */
.box {
  transform: translateY(-10px);
  transform: rotate(5deg);
}
Copied!

The correct way is to chain functions in the same property.

.box {
  transform: translateY(-10px) rotate(5deg) scale(1.05);
}
Copied!

Order matters. translateX(100px) rotate(30deg) doesn’t always produce the same result as rotate(30deg) translateX(100px). CSS applies the transformations in the specified order, which changes the final outcome.

Changing the Transform Origin

By default, transformations originate from the center of the element. We can change that point with transform-origin.

.door {
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.door:hover {
  transform: rotateY(25deg);
}
Copied!

This is very useful for simulating doors, cards that rotate from an edge, clock hands, or elements that unfold from a corner.

.hand {
  transform-origin: bottom center;
  transform: rotate(45deg);
}
Copied!

Absolute Centering with translate

One of the classic CSS patterns is centering an absolutely positioned element.

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Copied!

top: 50% and left: 50% place the top-left corner at the screen’s center. Then, translate(-50%, -50%) moves the element backward by half of its own size.

The trick might seem a bit strange at first, but it has been used for years to center modals, tooltips, and overlays.

The Jump to 3D

CSS also allows 3D transformations. In addition to the X and Y axes, the Z axis appears, representing depth.

.card {
  transform: rotateY(180deg);
}
Copied!

For a 3D transformation to have a sense of depth, we need perspective. This is usually applied to the parent container.

.stage {
  perspective: 1000px;
}

.card {
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.stage:hover .card {
  transform: rotateY(180deg);
}
Copied!

Perspective indicates the distance between the user and the 3D plane. A small value greatly exaggerates depth. A large value makes it more subtle.

To start with 3D, values between 800px and 1200px usually yield reasonable results. If you use 100px, the card might look like it jumped into a low-budget sci-fi movie.

Example: Elevated Card

A very common use of transform is to enhance the :hover state of a card.

.card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgb(0 0 0 / 14%);
}
Copied!

We are not changing the layout. We are just drawing the card a bit higher and reinforcing the shadow. The user perceives the element as interactive (I personally dislike this effect quite a bit, but there it is).

On this page