CSS Documentation

CSS Transforms

Menu

CSS Transforms

CSS transforms allow you to modify the appearance and position of an element without disrupting the normal document flow. They enable you to rotate, scale, skew, or translate an element.

Key Transform Functions

  • translate(): Moves an element along the X and/or Y axis.
  • rotate(): Rotates an element around a fixed point.
  • scale(): Increases or decreases the size of an element.
  • skew(): Skews an element along the X and/or Y axis.
  • matrix(): Allows you to specify a 2D transformation as a 6-value matrix.

Basic Syntax

.element {
ㅤtransform: function(value);
}

Examples

Translate

.translate-example {
ㅤtransform: translate(50px, 100px);
}

Rotate

.rotate-example {
ㅤtransform: rotate(45deg);
}

Scale

.scale-example {
ㅤtransform: scale(1.5, 2);
}

Skew

.skew-example {
ㅤtransform: skew(20deg, 10deg);
}

Multiple Transforms

You can apply multiple transforms to an element by separating them with spaces:

.multi-transform {
ㅤtransform: rotate(45deg) scale(1.5) translate(50px, 60px);
}

3D Transforms

CSS also supports 3D transforms, allowing you to manipulate elements in three-dimensional space:

  • rotateX(), rotateY(), rotateZ(): Rotate around the X, Y, or Z axis.
  • translateZ(): Move along the Z axis.
  • perspective(): Set the perspective for 3D transforms.

Browser Support and Performance

CSS transforms are well-supported in modern browsers. They can provide performance benefits over traditional positioning methods as they don't trigger reflows or repaints in many cases.

Best Practices

  • Use transforms for visual enhancements and animations instead of changing layout properties.
  • Combine transforms with transitions for smooth animations.
  • Be cautious with 3D transforms on mobile devices, as they can be performance-intensive.
  • Always provide fallbacks for older browsers that don't support transforms.

CSS transforms provide powerful tools for manipulating elements visually without affecting document flow. They're essential for modern web design and can greatly enhance user interfaces when used appropriately.