CSS translate() Function. CSS is a style sheet language that specifies HTML elements to display on a screen or in other media and it attains for cascading style sheet. CSS can control your document’s style, layouts, colors, fonts, etc webpages. In this article we are presenting CSS translate() which is involved in CSS transform which is powerful transform property that is described by a two-dimensional vector the coordinates provide you to know how many elements can move in each area and their are other such various functions like scale, rotate, skew or translate are HTML elements and most usually used function is CSS translate() which is the function that helps to move HTML elements.
CSS translate() Function
This CSS translate() function as explained above is a function used for arranging 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 can be represented individually or two-axis with 2D or 3 axes with 3D.
Let us see the syntax for single-axis and its example:
translate(translation value x) /*y-axis Syntac Example*/ translate(translation value y) /*3D version and defining only for z-axis*/ translate(translation value z)
Examples to Implement of CSS translate() Function
<h1>The CSS translate() function</h1>
<div class="translate">
This is Soft CodeOn training with CSS translate() function.
</div>
<style>
.translate {width: 300px;height: 100px;
background-color: #ddd;padding: 5px;
border: 1px solid #eee;transform: translate(50px);
}</style>Have a nice Day.