Learn 2D & 3D Transforms

2D Transform Functions

The transform property lets you visually move, rotate, scale, and skew elements without affecting the document layout. The original space the element occupies in the flow remains unchanged.

translate() — Moves an element from its current position.

css

transform: translate(50px, 20px);   /* x, y */
transform: translateX(50px);         /* horizontal only */
transform: translateY(-20px);        /* vertical only */

rotate() — Rotates an element around its center.

css

transform: rotate(45deg);    /* clockwise */
transform: rotate(-15deg);   /* counter-clockwise */

scale() — Resizes an element relative to its center.

css

transform: scale(1.5);       /* 150% of original size */
transform: scale(2, 0.5);    /* 2x wide, 0.5x tall */
transform: scaleX(0.8);      /* 80% width only */

skew() — Tilts an element along one or both axes.

css

transform: skew(10deg, 5deg); /* x-skew, y-skew */
transform: skewX(15deg);       /* horizontal tilt */

You can combine multiple transforms in a single declaration. They are applied right to left:

css

transform: translate(50px, 0) rotate(45deg) scale(1.2);

Transform Origin and Combining Transforms

html

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 40px;
    display: inline-block;
    color: white;
    font-size: 14px;
    text-align: center;
    line-height: 100px;
  }

  .translated {
    background: #6366f1;
    transform: translate(20px, 10px);
  }

  .rotated {
    background: #ec4899;
    transform: rotate(30deg);
    transform-origin: top left;
  }

  .scaled {
    background: #22c55e;
    transform: scale(1.3);
  }

  .combined {
    background: #f59e0b;
    transform: rotate(-10deg) scale(1.1) translateY(-5px);
    transform-origin: center center;
  }
</style>

<div class="box translated">Move</div>
<div class="box rotated">Spin</div>
<div class="box scaled">Grow</div>
<div class="box combined">Mix</div>

3D Transforms

CSS also supports 3D transformations, adding depth to the z-axis.

perspective — Defines the distance between the viewer and the z=0 plane. Smaller values create more dramatic 3D effects.

css

/* On the parent container */
.scene {
  perspective: 600px;
}

/* Or on the element itself */
.card {
  transform: perspective(600px) rotateY(30deg);
}

3D rotate functions:

css

transform: rotateX(45deg);  /* tilts forward/backward */
transform: rotateY(45deg);  /* spins left/right */
transform: rotateZ(45deg);  /* same as rotate() */
transform: rotate3d(1, 1, 0, 45deg); /* custom axis */

transform-style: preserve-3d — By default, child elements are flattened into their parent's plane. To let children exist in 3D space:

css

.scene {
  perspective: 800px;
}
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card:hover {
  transform: rotateY(180deg);
}
.card-front, .card-back {
  backface-visibility: hidden;
}

This pattern is the foundation of the classic CSS card flip effect.

2D & 3D Transforms

2D Transform Functions

Transform Origin and Combining Transforms

3D Transforms

Ready to practice?