Trending September 2023 # Introduction To Css Translate() Function With Examples # Suggested October 2023 # Top 11 Popular

You are reading the article Introduction To Css Translate() Function With Examples updated in September 2023 on the website Lanphuongmhbrtower.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested October 2023 Introduction To Css Translate() Function With Examples

Introduction to CSS translate() Function

CSS is a style sheet language that describes HTML elements to display on a screen or in other media, and it stands for cascading style sheet. CSS can control your document’s style –page layouts, colors, fonts, etc of web pages. This article discusses CSS translate, which is included in CSS transform, a powerful transformation property characterized by a two-dimensional vector. The coordinates allow you to know how many elements can move in each direction, and there are other functions like scale, rotate, skew, or translate HTML elements. The most commonly used function is CSS translate() which is the function that helps move HTML elements.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Working of CSS translate() Function

Let us see the syntax for the single-axis and its example:

Syntax :

translate(translation value x)

The above defines the values for only the x-axis.

translate(translation value y)

The above defines the values for only the y-axis.

translate(translation value z)

We use the above when using a 3D version and defining solely for the z-axis.

Examples to Implement of CSS translate() Function

Below are the examples of CSS translate() Functions:

Example #1

Code:

div { width: 300px; height: 100px; background-color: red; border: 1px solid black; transform: translate(50px); } This is Educba training with CSS translate() function.

Output:

Let us see the Syntax for the two-axis and its example:

Syntax:

translate(translation value tx, translation value ty)

Parameters:

tx: This holds the transformation length corresponding to the x-axis.

ty: This holds the transformation length corresponding to the y-axis. It takes 0 as the default value.

Example #2

Below is an example of two axis

Code:

div { width: 300px; height: 100px; background-color: red; border: 1px solid black; -ms-transform: translate(50px,100px); transform: translate(50px,100px); } This is Educba training with CSS translate() function.

Output:

In the above CSS code, we specified the translate function to shift the red box in both the x and y-axis. The translate function in CSS usually moves the element with pixels related to the original position in which the x value is horizontal, and y is vertical. In the above program, we have to shift to 50 pixels on the x-axis, which means the right side and 100 pixels on the y-axis mean 100px down from the current position.

There is another function known as the matrix transformation function, which is a function that is used to combine all other transformation functions such as rotate(), skew(), scale(), and translate(). This means the matrix function converts a group of transformation functions into a single matrix.

Example #3

Code:

rotate(75 deg) translate( 50px, 100px)

You can represent the 3D version of this translate() function below.

Translate3d(x, y, z)

Where in the above has another value similar to x and y, that is, z, which moves the element towards the viewer if the values of z are positive, and if they are negative values, then they move away from the viewer.

This article discusses the transform function in which we are provided four other functions: scale, skew, rotate, and translate. The CSS property is the transform, and the CSS value attached to that property is translate(). Therefore, translate() is the inbuilt function mainly used to align the elements in the HTML layout.

The translation of a single element makes no difference from its origin because it has twice zero as translation values.

Conclusion

In this article, we conclude that the translate() function is a function of the CSS transform function, where the CSS transform function is the property of the CSS, and the translate() function is the value attached to the transform function. This translate() function is a function that allows you to shift or align or move the elements horizontally or vertical or up or downwards. This article shows that the translate() function takes the x-axis as the parameter by default. There are mainly 3-dimensional values provided x, y, and z-axis. People commonly use the 2D translate() function with horizontal and vertical values.