A brief analysis of the differences and functions between transition, transform, and translate in CSS3

transform and translate

Transform refers to transformation and deformation. It is a CSS3 attribute, just like other width and height attributes.

translate is the attribute value of transform, which means that the element is transformed in 2D. 2D transformation means that the element moves in the direction of the x-axis and in the direction of the y-axis from the current position (0,0).

For example:

transform: translate(0,100%) means moving the element downward along the y-axis from its current position by the entire height of the element.

transform: translate(-20px,0) means moving 20px to the left along the x-axis from the current position of the element

transform has many other property values, translate3D (3D transformation), scale (2D scaling) and other transformation methods.

transition

transition is the animation process of changing one set of CSS properties to another set of properties within a certain period of time. Can be used to achieve dynamic effects, css3 properties

Syntax transition: The property to be transformed The time required to transform Control the speed of the animation Change The delay time after which the animation starts to execute

The transition property is written in the initial style, not in the ending style, which is the style that defines the appearance of the element before the animation starts. You only need to set a transition on an element once, and the browser will take care of animating from one style to another.

For example:

transition:width 2s;

transition:translate 2s;

Transtion: all 2s.

Summarize

This concludes this article about the differences and functions of transition, transform, and translate in CSS3. For more relevant css3 transition, transform, and translate content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future!