CSS transform functions visually manipulate webpage elements without affecting layout. 1. Translate moves elements via translate(), translateX(), translateY(). 2. Scale adjusts size with scaleX(), scaleY(), scale(). 3. Rotate spins elements clockwise or counter-clockwise. 4. Skew tilts elements using skewX(), skewY(), skew(). 5. Functions can be combined for complex effects while preserving page structure.

CSS transform functions let you visually manipulate elements on a webpage — moving, resizing, rotating, or skewing them without affecting the layout of other content. These transformations are applied using the transform property and include common functions like translate, scale, rotate, and skew.

Translate: Move Elements Around

The translate() function shifts an element from its current position along the X (horizontal) and Y (vertical) axes.

• Use translateX(value) to move only horizontally
• Use translateY(value) to move only vertically
• Use translate(x, y) for both directions at once

For example:

.element {
  transform: translate(20px, 10px);
}

This moves the element 20 pixels to the right and 10 pixels down. It’s commonly used for subtle animations or repositioning elements without affecting document flow.

Scale: Change Size Visually

With scale(), you can increase or decrease the size of an element. You can control scaling on each axis separately:

• scaleX(n) stretches or shrinks horizontally
• scaleY(n) does the same vertically
• scale(n) scales both equally

Values greater than 1 make the element bigger, while values between 0 and 1 shrink it. For instance:

.element:hover {
  transform: scale(1.2);
}

This makes the element grow slightly when hovered over — a popular trick for interactive buttons or images.

Rotate: Turn Elements Clockwise or Counter

The rotate() function spins an element around its center point. The value is in degrees (deg) or radians (rad). Positive values rotate clockwise; negative ones go counter-clockwise.

Example:

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

You’ll often see this used in loading spinners, hover effects, or adding visual interest to icons and text elements.

Skew: Tilt Elements Like a Slant

Skewing tilts an element by a given angle along the X or Y axis. The functions skewX() and skewY() tilt it one way or the other, while skew(x-angle, y-angle) applies both.

Example:

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

This gives a slanted look — useful for modern design layouts or stylized call-to-action sections. But be careful not to overdo it, as heavy skewing can make text hard to read.

These basic transform functions can be combined into one transform declaration for more complex effects. Just separate them with spaces:

transform: translate(20px, 10px) scale(0.9) rotate(-5deg);

They’re especially powerful when animated or triggered by user interaction, all without changing the actual page structure.

The above is the detailed content of What are CSS transform functions (translate, scale, rotate, skew)?. For more information, please follow other related articles on the PHP Chinese website!