Tutorials
CSS
CSS Transforms

CSS Transforms

CSS transforms let you change the position, size, and shape of elements. You can rotate, scale, skew, and translate elements without affecting the document flow.

What are CSS Transforms?

Transforms modify how elements are displayed in 2D or 3D space. They’re commonly used for animations, hover effects, and creating visual interest.

.transformed {
  transform: rotate(45deg);
}

2D Transforms

Translate

Move an element from its current position.

.translate-x {
  transform: translateX(50px); /* Move right 50px */
}

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

.translate-both {
  transform: translate(30px, 10px); /* Move right 30px, down 10px */
}

Rotate

Rotate an element around a point.

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

.rotate-counter {
  transform: rotate(-90deg); /* Rotate 90 degrees counter-clockwise */
}

Scale

Change the size of an element.

.scale-up {
  transform: scale(1.5); /* 150% of original size */
}

.scale-down {
  transform: scale(0.8); /* 80% of original size */
}

.scale-xy {
  transform: scaleX(1.2) scaleY(0.5); /* Scale width and height separately */
}

Skew

Distort an element by tilting it.

.skew-x {
  transform: skewX(20deg); /* Skew horizontally */
}

.skew-y {
  transform: skewY(15deg); /* Skew vertically */
}

.skew-both {
  transform: skew(10deg, 5deg); /* Skew both axes */
}

Transform Origin

Set the point around which transforms happen.

.origin-center {
  transform-origin: center; /* Default */
}

.origin-top-left {
  transform-origin: top left;
}

.origin-custom {
  transform-origin: 50px 100px; /* Specific coordinates */
}

Combining Transforms

Apply multiple transforms at once.

.combined {
  transform: translateX(100px) rotate(45deg) scale(1.2);
}

Order matters! Transforms are applied in the order you write them.

3D Transforms

Add depth to your transforms.

Rotate in 3D 

.rotate-3d {
  transform: rotateX(45deg) rotateY(30deg);
}

.flip-card {
  transform: rotateY(180deg); /* Flip like a card */
}

Translate in 3D 

.translate-z {
  transform: translateZ(50px); /* Move closer/farther */
}

Perspective

Create a sense of depth.

.container {
  perspective: 1000px; /* Distance from viewer */
}

.element {
  transform: rotateY(45deg);
}

Transform Style

Control how child elements are rendered in 3D space.

.parent {
  transform-style: preserve-3d; /* Children stay in 3D */
}

.parent {
  transform-style: flat; /* Default: flatten to 2D */
}

Practical Examples

Hover Effects

Create interactive hover effects.

.card {
  transition: transform 0.3s ease;
}

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

Image Gallery

Add transforms to images.

.image-grid img {
  transition: transform 0.3s ease;
}

.image-grid img:hover {
  transform: scale(1.1) rotate(5deg);
}

Modal Animation

Animate modal appearance.

.modal {
  transform: scale(0.8) translateY(-50px);
  opacity: 0;
  transition: all 0.3s ease;
}

.modal.show {
  transform: scale(1) translateY(0);
  opacity: 1;
}

Card Flip Effect

Create a 3D card flip.

.flip-card {
  perspective: 1000px;
}

.flip-card-inner {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  backface-visibility: hidden;
}

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

Performance Considerations

Some transforms are more performant than others:

  • Good: translate, scale, rotate
  • OK: skew
  • Avoid in animations: Changing width/height (use transform instead)
/* Use this */
.animate {
  transform: translateX(100px);
}

/* Instead of this */
.animate {
  left: 100px;
}

Browser Support

Transforms are well supported:

  • Chrome 36+ (3D transforms)
  • Firefox 16+
  • Safari 9+
  • Edge 12+

Use vendor prefixes for older browsers.

.transformed {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

Best Practices

  1. Use transforms for animations instead of changing position properties
  2. Combine multiple transforms efficiently
  3. Set transform-origin appropriately
  4. Use perspective for 3D effects
  5. Test on different devices and browsers

Common Use Cases

  • Hover effects: Scale or rotate on hover
  • Animations: Smooth transitions between states
  • Modals: Scale in/out effects
  • Image galleries: Zoom and rotate effects
  • Cards: Flip animations for showing back content

External Resources:

Related Tutorials:

Last updated on
CSS Box ModelPseudo-classes and Pseudo-elements