The CSS transform attribute is used to rotate, scale, tilt, and translate elements without affecting the document flow. Its basic syntax is transform: function values, such as rotate(), scale(), translate() and skew(). Multiple functions are separated by spaces and executed in order from right to left. Unlike top and left, translate is rendered through GPU, which is more suitable for animation and has better performance. Use transform-origin to adjust the transform center point, supporting two or three values to define the origin position. The order of multiple transformations will affect the final effect, so please be careful to execute the rightmost function first. Mastering these key points allows for smooth and complex visual effects.

The transform attribute of CSS allows you to rotate, scale, tilt and translate elements without changing the document flow. It is not only simple and effective, but also has good performance, suitable for animation and interaction effects.

How to use transform basic syntax?

transform property accepts one or more functions as values that define the type of transformation you want to apply. The basic writing method is as follows:

 transform: rotate(30deg) scale(1.5);

You can apply multiple transformations at the same time, just separate them with spaces. The order is important because the browser will perform the transformation in the order from right to left (i.e. scale first and then rotate).

Commonly used transformation functions include:

• rotate() —— Rotate
• scale() — scale
• translate() ——Plant
• skew() ——Tilt

For example, if you want a button to zoom in and rotate slightly when clicking, you can write it like this:

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

What is the difference between translate and absolute positioning?

Many people will ask: Since translate can move elements, what is the difference between it and position: absolute; top: xx; left: xx ?

In fact, their functions look similar, but the underlying mechanisms are different. translate is rendered at the GPU level, which is more suitable for animation and has better fluency; while top and left trigger layout rearrangement, which is slightly inferior in performance.

For example, if you want to make a sliding animation, using translate is more recommended than directly changing top value:

 .slide-in {
  transform: translateY(-20px);
  opacity: 0;
  transition: all 0.3s ease;
}

.slide-in.active {
  transform: translateY(0);
  opacity: 1;
}

This will make the animation smoother, especially on mobile devices.

transform-origin Adjust the transformation center point

By default, the transformation is performed around the center point of the element. But if you want to rotate around the upper left corner, or zoom at a specific point, you need to use the transform-origin property.

For example:

 .box {
  transform: rotate(45deg);
  transform-origin: top left;
}

This causes the element to rotate with the upper left corner as the axis. This property is often used in scenes such as icon animation, menu expansion and collapse.

You can set two or three values to control the origin position, for example:

• transform-origin: 50% 50% (default, center)
• transform-origin: left bottom
• transform-origin: 10px 20px

Remember, adjusting origin will affect the entire transformation effect, so it is recommended to cooperate with browser developer tools to view changes during debugging.

How to combine multiple transformations?

As mentioned earlier, there is an order between multiple transformations. Although the writing method is from left to right, the actual execution order is from right to left .

for example:

 transform: rotate(30deg) translateX(100px);

In fact, it is to move 100px to the right first, and then rotate the overall 30 degrees. At this time, you will find that the position of the element is not simply shifted 100px to the right, but is offset by an arc around a certain point.

If you want to rotate first and then translate, you need to change the order:

 transform: translateX(100px) rotate(30deg);

Understanding this is very important for creating complex animations. If you are not sure about the impact of the order, you can try it a little bit in the browser and observe the differences.

Basically that's it. By mastering the basic usage and common techniques of transform, you can create many practical and beautiful visual effects.

The above is the detailed content of Implementing Transformations Using the CSS Transform Property. For more information, please follow other related articles on the PHP Chinese website!