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 documents style –page layouts, colors, fonts, etc of web pages. In this article we are discussing CSS translate which is included in CSS transform which is powerful transformation property which is characterized by a two-dimensional vector and the coordinates allows you to know how many elements can move in each direction and there are other such various functions like scale, rotate, skew or translate are HTML elements and most commonly used function is CSS translate() which is the function that helps to move HTML elements.
Working of CSS translate() Function
This CSS translate() function as discussed above is a function used for aligning the elements in different directions ( horizontally and vertically or up and down) and it outputs a <transform – function> data type. This function can have 3 axes namely x, y, z which they can be declared independently or two-axis with 2D or 3 axes with 3D.
Let us see the syntax for single-axis and its example:
Syntax :
translate(translation value x)
the above is used for defining the values for only x-axis
or
translate(translation value y)
the above is used for defining the values for the only y-axis
or
translate(translation value z)
the above is used when we are using 3D version and defining only for z-axis
4.5 (7,122 ratings)
View Course
Examples to Implement of CSS translate() Function
Below are the examples of CSS translate() Function:
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<Title> Educba Training </Title>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
border: 1px solid black;
transform: translate(50px);
}
</style>
</head>
<body>
<h1>The CSS translate() function</h1>
<div>
This is Educba training with CSS translate() function.
</div>
</body>
</html>
Output:
In the above example of CSS code is for a single axis. In this, above we have seen only 50 px is declared in the translate() function which by default takes x axis which will go right side if the value is positive and left side if the value is negative.
Let us see the Syntax for two axis and its example:
Syntax:
translate (translation value tx, translation value ty)
parameters:
- tx: this is used for holding the length of transformation corresponds to the x-axis.
- ty: This is used for holding the length of transformation corresponds to the y-axis. It takes 0 as default value.
Example #2
Code:
Below is the example for two axis
<!DOCTYPE html>
<html>
<head>
<Title> Educba Training </Title>
<style>
div {
width: 300px;
height: 100px;
background-color: red;
border: 1px solid black;
-ms-transform: translate(50px,100px);
transform: translate(50px,100px);
}
</style>
</head>
<body>
<h1>The CSS translate() function</h1>
<div>
This is Educba training with CSS translate() function.
</div>
</body>
</html>
Output:
In the above CSS code in which we have specified the translate function to shift the red box in both x and y-axis. The translate function in CSS usually moves the element with pixels related to the original position in which x value is for horizontal and y is for vertical. In the above program, we can see we have to shift to 50 pixels in the x-axis that means the right side and 100 pixels in the y-axis mean 100px down from the current position.
This x axis and y-axis values would be of any length of pixels the values usually move right if it’s in the x-axis and is the positive value whereas if it is negative value then it will move to left. Therefore for the y-axis, if values are positive then they move down and if the values are negative then they move upwards. This function can move elements in the z-axis also.
There is another function known as 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 which converts a group of transformation functions into a single matrix.
Example #3
Code:
rotate (75 deg) translate ( 50px, 100px)
The 3D version of this translate() function can be represented as 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.
In this article, we have discussed the transform function in which we are provided with 4 other functions scale, skew, rotate, translate functions. The transform is the CSS property, translate() is the CSS value attached to that property. Therefore translate() is the inbuilt function which is mainly used for aligning 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 translate() function is a function of CSS transform function where CSS transform function is the property of the CSS and 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 in horizontal or vertical or up or downwards. In this article, we have seen that by default the translate() function takes x-axis as the parameter. There are mainly 3-dimensional values provided are x, y, and z-axis. In general, the most commonly used is 2D translate() function which has horizontal and vertical values.
Recommended Articles
This is a guide to CSS translate. Here we discuss a brief overview of CSS translate and its working along with Examples and code Implementation. You can also go through our other suggested articles to learn more –
