Detailed Explanation of the CSS Transform Property

Description
The CSS transform property allows you to apply 2D or 3D transformations to an element, including rotation, scaling, skewing, and translation. It does not affect the document flow layout (adjacent elements are not reflowed due to transform), but it creates a new stacking context and containing block. transform is one of the key properties for implementing complex visual effects and animations.

Basic Syntax

transform: none | <transform-function> [<transform-function>]*;

• none: Default value, applies no transformation.
• <transform-function>: One or more transformation functions, applied sequentially from left to right.

Common Transform Functions Explained

1. Translate
Moves an element in 2D or 3D space.

• translateX(tx): Moves horizontally, where tx is a length value (e.g., px, %).
• translateY(ty): Moves vertically.
• translate(tx, ty): Specifies both horizontal and vertical movement.
• translate3d(tx, ty, tz): 3D translation, can enable hardware acceleration.

Example:

.box {
  transform: translateX(50px); /* Move right 50px */
  transform: translate(20px, 30px); /* Move right 20px, down 30px */
  transform: translate3d(10px, 20px, 30px); /* Add Z-axis movement */
}

Note: Percentage units are calculated relative to the element's own dimensions (e.g., translateX(50%) moves half of the element's own width).

2. Scale
Adjusts the element's size, with independent control over each axis.

• scale(sx): Uniform scaling (sx is a multiplier, e.g., 0.5 means shrink by half).
• scale(sx, sy): Specifies horizontal and vertical scaling factors separately.
• scaleX(sx) / scaleY(sy): Single-axis scaling.
• scale3d(sx, sy, sz): 3D scaling.

Example:

.box {
  transform: scale(1.5); /* Enlarge by 1.5 times */
  transform: scale(0.8, 1.2); /* Width reduced to 80%, height enlarged to 120% */
}

3. Rotate
Rotates an element around a specified axis.

• rotate(angle): 2D rotation, angle units (deg, rad, etc.).
• rotateX(angle) / rotateY(angle): Rotate around the X/Y axis (3D effect).
• rotate3d(x, y, z, angle): Custom rotation axis.

Example:

.box {
  transform: rotate(45deg); /* Rotate 45 degrees clockwise */
  transform: rotateY(180deg); /* Flip 180 degrees around the Y-axis (like a card flip) */
}

4. Skew
Skews an element along the horizontal or vertical direction.

• skew(ax, ay): Specifies skew angles for both X and Y axes.
• skewX(ax) / skewY(ay): Single-axis skew.

Example:

.box {
  transform: skew(10deg, 5deg); /* Skew 10 degrees on X-axis, 5 degrees on Y-axis */
}

Combining Transformations and Order
Multiple transform functions are applied in sequence, and different orders can produce completely different results. For example:

/* Translate first, then rotate: movement direction is based on the original coordinate system */
.transform1 { transform: translateX(100px) rotate(45deg); }

/* Rotate first, then translate: movement direction is based on the rotated coordinate system */
.transform2 { transform: rotate(45deg) translateX(100px); }

Key Properties for 3D Transformations

• transform-style: preserve-3d: Allows child elements to preserve their 3D position (default flat flattens them).
• perspective: distance value: Sets the distance between the observer and the z=0 plane, creating a perspective effect.
• transform-origin: Sets the origin point for transformations (default is center), e.g., transform-origin: left top.

Performance Optimization Suggestions

• Prefer using 3D functions like translate3d(), scale3d() to trigger GPU acceleration.
• Avoid using transform alongside layout-changing properties (like width/left) in animations.

Practical Application Scenarios

1. Centering positioning: Combine top:50%; left:50%; transform: translate(-50%, -50%) for precise centering.
2. Hover animations: Use transform: scale(1.05) to achieve a hover zoom effect.
3. 3D card flip: Combine rotateY() and translateZ() to create 3D interactive effects.

By flexibly combining these transformations, you can efficiently achieve rich dynamic effects without causing document reflow.