The CSS transform attribute realizes the translation, rotation and scaling effects of elements through functions such as translate, rotate, scale. 1. translate is used for smooth movement, such as button hover displacement; 2. rotate is used to implement rotation animation, suitable for loading icons; 3. scale is used to create zoom feedback, such as image hovering; 4. Multiple functions can be used in combination to enhance visual effects without affecting layout and improve interactive experience.

The transform attribute of CSS is a very practical tool, especially when using it to create web page visual effects. If used well, it can make the page look more vivid and layered. It not only has simple displacement or rotation, but also combines animations, transitions, etc. to create many attractive small details.

How to use translate to achieve smooth movement

translate() is one of the most commonly used transform functions, used to move elements without changing the document stream. Compared to using position: relative or margin to adjust the position, translate is better in performance and animation performance.

For example, if you want to click a button and jump slightly to the upper right, you can use:

 button:hover {
  transform: translate(-5px, -5px);
}

This effect is often used in scenes such as button interaction, card hovering, etc., giving people a feeling of "pressing and bounce up". If you use it with transition , you can also smooth the movement process.

Tips:

• Move multiple directions can be written as translate(x, y) , or translateX() and translateY() can be used separately.
• The distance of movement is recommended to be controlled between 5~15px, as it is too large and it will easily appear abrupt.

Use rotate to create rotation animation

rotate() can rotate elements around the center point, and is often used in scenes such as loading icons, icon switching, menu expansion, etc.

For example, a refresh button continues to rotate when loading:

 .loading {
  animation: spin 1.2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

It should be noted that the default rotation center is the element center. If you want to change it to the upper left corner or other position, you need to use it with transform-origin .

Common uses include:

• Changes in status after button click
• Transition when icon switches
• Menu Expand/Close animation

Visual feedback from scale

scale() can zoom in or out of element, which is very suitable for user feedback effects such as mouse hovering to increase, clicking and scaling.

For example, common image hovering effect:

 img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.1);
}

This method is more natural than changing width and height directly, and it will not affect the layout. However, be aware that scaling exceeds 1.2 times may cause elements to overlap or overflow the container, and the layout space needs to be considered in advance.

In addition, negative values ??such as scale(-1) can also achieve mirror flip, which is suitable for some special UI effects.

Use with multiple transform functions

CSS allows you to superimpose multiple functions in the same transform property, and as long as the order is correct, it can produce complex and smooth effects.

For example, when a button is clicked, it can be scaled and rotated at the same time:

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

Note that the order will affect the final effect, such as rotating first and then translation, and translation first and then rotation, the result may be different.

Common combinations are:

• scale rotate : Enhanced visual feedback
• translate scale : simulates "bounce" effect
• rotate skew : Create a tilt dynamic style

Basically that's it. The power of transform is actually much more than that, but its advantage is that it is simple and easy to use, and a little bit of it can improve the overall experience.

The above is the detailed content of Using CSS transform properties for visual effects. For more information, please follow other related articles on the PHP Chinese website!