What Are CSS Transforms?

CSS transforms let you visually change elements by moving, rotating, scaling, or skewing them. Transforms do not affect the document flow, meaning other elements stay in their original positions even when a transform is applied.

The transform Property

All transforms are applied using the `transform` property. You can combine multiple transform functions in a single declaration.

CSS

.box {
  transform: translateX(50px) rotate(10deg) scale(1.1);
}

Translate (Move)

The `translate` function moves an element from its current position without affecting the layout around it.

CSS

/* Move along X axis */
.move-right {
  transform: translateX(100px);   /* Move 100px to the right */
}

.move-left {
  transform: translateX(-50px);   /* Move 50px to the left */
}

/* Move along Y axis */
.move-down {
  transform: translateY(30px);    /* Move 30px down */
}

.move-up {
  transform: translateY(-20px);   /* Move 20px up */
}

/* Move both axes at once */
.move-diagonal {
  transform: translate(50px, 30px);  /* X: 50px right, Y: 30px down */
}

/* Percentage values are relative to the element's own size */
.shift-half {
  transform: translateX(50%);     /* Move right by half its own width */
}

Centering with Translate

One of the most useful applications of translate is perfect centering.

CSS

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

This pattern works regardless of the element's dimensions because the percentage in translate is relative to the element's own size.

Rotate

The `rotate` function spins an element around a center point.

CSS

.rotate-45 {
  transform: rotate(45deg);     /* Clockwise 45 degrees */
}

.rotate-90 {
  transform: rotate(90deg);     /* Quarter turn clockwise */
}

.rotate-180 {
  transform: rotate(180deg);    /* Upside down */
}

.rotate-negative {
  transform: rotate(-30deg);    /* Counter-clockwise 30 degrees */
}

/* Full rotation */
.spin {
  transform: rotate(360deg);
}

Practical Rotation Examples

CSS

/* Decorative tilted card */
.tilted-card {
  transform: rotate(-2deg);
  transition: transform 0.3s ease;
}

.tilted-card:hover {
  transform: rotate(0deg);
}

/* Arrow icon pointing direction */
.arrow-down {
  transform: rotate(90deg);
}

.arrow-up {
  transform: rotate(-90deg);
}

.arrow-left {
  transform: rotate(180deg);
}

/* Diagonal ribbon */
.ribbon {
  position: absolute;
  top: 20px;
  right: -30px;
  transform: rotate(45deg);
  background-color: #e74c3c;
  color: white;
  padding: 5px 40px;
}

Scale

The `scale` function changes the size of an element.

CSS

/* Scale uniformly */
.grow {
  transform: scale(1.2);    /* 120% size */
}

.shrink {
  transform: scale(0.8);    /* 80% size */
}

.double {
  transform: scale(2);      /* 200% size */
}

/* Scale X and Y independently */
.stretch-horizontal {
  transform: scaleX(1.5);   /* 150% width, normal height */
}

.stretch-vertical {
  transform: scaleY(1.3);   /* Normal width, 130% height */
}

.both {
  transform: scale(1.5, 0.8); /* 150% width, 80% height */
}

/* Flip an element */
.flip-horizontal {
  transform: scaleX(-1);
}

.flip-vertical {
  transform: scaleY(-1);
}

Interactive Scale Effects

CSS

/* Hover zoom on cards */
.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

/* Button press effect */
.button {
  transition: transform 0.1s ease;
}

.button:active {
  transform: scale(0.95);
}

/* Image zoom on hover */
.image-container {
  overflow: hidden;
  border-radius: 8px;
}

.image-container img {
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

Skew

The `skew` function tilts an element along the X or Y axis.

CSS

.skew-x {
  transform: skewX(10deg);
}

.skew-y {
  transform: skewY(-5deg);
}

.skew-both {
  transform: skew(10deg, 5deg);
}

Practical Skew Examples

CSS

/* Angled section divider */
.angled-section {
  position: relative;
  padding: 60px 20px;
  background-color: #3498db;
  color: white;
}

.angled-section::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #3498db;
  transform: skewY(-2deg);
}

/* Parallelogram button */
.parallelogram-btn {
  padding: 12px 30px;
  background-color: #2c3e50;
  color: white;
  border: none;
  transform: skewX(-10deg);
  cursor: pointer;
}

.parallelogram-btn span {
  display: inline-block;
  transform: skewX(10deg);  /* Un-skew the text */
}

Transform Origin

By default, transforms happen from the center of an element. The `transform-origin` property changes that pivot point.

CSS

/* Default: center */
.from-center {
  transform-origin: center;
  transform: rotate(45deg);
}

/* Top-left corner */
.from-top-left {
  transform-origin: top left;
  transform: rotate(45deg);
}

/* Bottom-right corner */
.from-bottom-right {
  transform-origin: bottom right;
  transform: scale(1.5);
}

/* Custom position */
.custom-origin {
  transform-origin: 20% 80%;
  transform: rotate(30deg);
}

/* Practical: door opening effect */
.door {
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.door:hover {
  transform: rotateY(-60deg);
}

Combining Multiple Transforms

You can chain transforms together in one declaration. The order matters because transforms are applied from right to left.

CSS

/* Move, then rotate */
.combined {
  transform: translateX(100px) rotate(45deg);
}

/* Scale and move on hover */
.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px) scale(1.02);
}

/* Complex combination */
.fancy {
  transform: translate(50px, 20px) rotate(15deg) scale(1.1) skewX(5deg);
}

Order matters:

`transform: translateX(100px) rotate(45deg)` first rotates, then moves along the rotated axis
`transform: rotate(45deg) translateX(100px)` first moves right 100px, then rotates

Transforms with Transitions

Transforms become truly powerful when combined with transitions for smooth animations.

CSS

/* Smooth hover card */
.card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Icon spin on hover */
.icon-button {
  transition: transform 0.3s ease;
}

.icon-button:hover .icon {
  transform: rotate(180deg);
}

/* Navigation link underline slide */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #3498db;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

Performance

Transforms are one of the most performant CSS properties because they are handled by the GPU. The browser does not need to recalculate layout when a transform changes, making animations smooth even on mobile devices.

Best practice: For animations, prefer `transform` and `opacity` over properties like `width`, `height`, `top`, or `left`, which trigger layout recalculations and are slower.

Summary

CSS transforms let you visually manipulate elements without affecting page layout. Use translate for movement, rotate for spinning, scale for resizing, and skew for tilting. Change the pivot point with transform-origin and combine multiple transforms for complex effects. Pair transforms with transitions for smooth, performant animations.

In the next section, you will learn about Responsive Design.