CSS transform 用於視覺上改變元素的形狀、位置或方向，且不影響文檔流。 1. translate() 函數(shù)可在不引起重排的情況下移動元素，常用於平滑動畫；2. rotate()、scale() 和skew() 可旋轉(zhuǎn)、縮放和傾斜元素，適合懸停效果和佈局設(shè)計；3. 結(jié)合transition 使用transform 能創(chuàng)建流暢的響應(yīng)式動畫，提升交互體驗；4. 通過translateZ()、rotateX() 和perspective() 可實現(xiàn)3D 動畫效果，但需注意合理使用以避免複雜度過高。

The CSS transform property is used to visually change the shape, position, or orientation of an element without affecting the document flow. It allows you to rotate, scale, skew, or translate elements — all in 2D or 3D space.

1. Moving Elements Around (Translation)

One of the most common uses of transform is moving elements without using positioning ( top , left , etc.). The translate() function shifts an element along the X and Y axes (or Z in 3D).

For example:

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

This moves the element 20 pixels to the right and 10 pixels down. You can also use translateX() or translateY() for movement along a single axis.

• Using transform for movement is often smoother than changing top or left , especially during animations.
• It doesn't cause reflow, which helps with performance.

2. Rotating, Scaling, and Skewing Elements

You can alter the appearance of an element by rotating, resizing, or distorting it:

• rotate(15deg) – rotates the element 15 degrees clockwise.
• scale(1.5) – makes the element 1.5 times larger.
• scaleX(2) – stretches the element horizontally.
• skew(10deg, 5deg) – tilts the element diagonally.

These transformations are great for hover effects, loading animations, or stylized layouts.

Note: scaling and rotating happen around the element's center by default, but you can change this with the transform-origin property.

3. Creating Smooth Transitions and Animations

Since transform is hardware-accelerated in most browsers, it's ideal for animations that need to feel smooth and responsive.

For example, combining transform with transition gives a nice hover effect:

 .button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: scale(1.1) rotate(2deg);
}

This slightly enlarges and tilts the button on hover, making it more engaging without being distracting.

• Use easing functions like ease-out or ease-in-out for natural motion.
• Avoid overusing transforms; subtle changes usually work best.

4. Working in 3D Space (Advanced Use)

If you're building something like a 3D card flip or a rotating cube, you can use 3D transform functions like:

• translateZ(50px) – moves the element toward the viewer.
• rotateX(45deg) – tilts the element up or down in 3D.
• perspective(800px) – adds depth to the scene (should be applied to the parent container).

These require some setup and understanding of how 3D transforms behave in CSS, but they open the door to impressive visual effects.

Transforms are powerful but don't always need to be complex. A little goes a long way — basically just enough to make things look alive without breaking layout.

以上是CSS'變換”屬性是用什麼？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！