CSS Transforms Overview

CSS transforms modify element position, rotation, scale, and skew without affecting document flow. They're GPU-accelerated for smooth animations and transitions. Transforms are essential for modern interactive UIs.

Transform Types

Transform	Effect	Use Case
translate()	Move element	Positioning without layout shift
rotate()	Rotate element	Icon rotation, visual effects
scale()	Resize element	Zoom effects, interactions
skew()	Skew element	Perspective effects

CSS

/* Individual transforms */
.element {
  transform: translateX(50px);      /* Move right 50px */
  transform: translateY(-20px);     /* Move up 20px */
  transform: rotateZ(45deg);        /* Rotate 45 degrees */
  transform: scale(1.5);            /* Scale 150% */
}

/* Multiple transforms (chain) */
.element {
  transform: translateX(50px) rotateZ(45deg) scale(1.5);
  /* Translate, then rotate, then scale */
}

/* Transform origin */
.element {
  transform-origin: center;
  transform: rotate(45deg);
  /* Rotation happens from center */
}

2D vs 3D Transforms

CSS

/* 2D transforms (flat) */
.element {
  transform: translate(50px, 20px);
  transform: rotate(45deg);
  transform: scale(1.5);
}

/* 3D transforms (depth) */
.element {
  transform: translateZ(50px);      /* Move toward viewer */
  transform: rotateX(45deg);        /* Rotate in 3D */
  transform: rotateY(45deg);        /* Rotate in 3D */
  transform: perspective(1000px);   /* 3D perspective */
}

Common Patterns

CSS

/* Hover scale effect */
button {
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.05);
  /* Slight zoom on hover */
}

/* Icon rotation */
.icon {
  transition: transform 0.3s;
}

.icon:hover {
  transform: rotate(180deg);
  /* Full rotation on hover */
}

/* Centered transform */
.card {
  transform-origin: center;
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.02) translateY(-5px);
  /* Slight lift effect */
}

Note

Transforms modify appearance without affecting layout. GPU-accelerated for performance. Perfect for animations and hover effects.

Translate: [translate()](/css/translate).