CSS translate() function26 Mar 2025 | 1 min read The translate() function is an in-built function of CSS to repositions the element either in the vertical or in the horizontal direction. It moves the element from its current direction based on the given parameters. SyntaxThe parameter ty is optional. If it is not specified, its value is assumed to be zero. Now, we are going to discuss each parameter in detail. Parameterstx: This parameter defines the translation length along the x-axis. It represents the abscissa (horizontal, x-coordinate) of the translating vector. If we write translate(4), then it will be equivalent to translate(4,0). ty: It defines the translation length corresponding to the y-axis. Its default value is 0, which is used when the value of this parameter is not defined. Let's understand this function using some illustrations. Example1In this example, we are going to define the value of the parameter tx only. Example2Next TopicCSS Gradient |
CSS Z Index The stacking order of components on a web page is usually managed using the CSS "z-index" attribute. Here, "stacking" refers to the visual arrangement and layering of components on top of one another on a website. The stacking order decides which element displays in...
2 min read
/ Style Sheets or CSS Style Sheets are used to attach specific sound style features to specific document elements. It uses speech synthesis and sound effect to facilitate users to listen to information instead of reading them. So, it is very useful for visually impaired people. Aural...
2 min read
Introduction When there is a visitor to our web page, and they click on the button, then they expect some feedback from the developer side. If there is no feedback from the developer side, then the user may think something may be wrong. Also, they quickly go...
12 min read
CSS Media Query Introduction With the help of media in CSS, we can use media queries to apply different styles for different devices. With the help of a media query, we can also check the device's height, width, resolution, and orientation (Portrait/Landscape). The main aim of the CSS rule...
5 min read
are a great way to display extra information about something when the user moves the mouse cursor over an element. Basic Tooltip Example Let's create basic tooltip that appears when the cursor of the mouse moves over an element. See this example: <!DOCTYPE html> <html> <style> .tooltip { ...
3 min read
CSS Pseudo Classes What is Pseudo Classes? A pseudo-class can be defined as a keyword which is combined to a selector that defines the special state of the selected elements. It is added to the selector for adding an effect to the existing elements based on their...
7 min read
/ Fade In Tooltips The CSS fade in tooltip or tooltip animation is used to fade in the tooltip text when it is about to visible. The CSS3 "transition" property along with "opacity" property is used o attain fade in tooltip or tooltip animation. The animation...
1 min read
Flexbox in CSS What is Flexbox? In CSS, we use Flexbox, a layout model that offers us a variety of ways to arrange the element and helps us align the element in CSS. With Flexbox's help, we can design responsive and dynamic webpage or user interface layouts. In CSS,...
6 min read
There are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px;...
4 min read
CSS This CSS property specifies the initial size of the flex item. It only works on the flex-items, so if the container's item is not a flex-item, the will not affect the corresponding item. Generally, this CSS property is used with the other flex...
2 min read
We request you to subscribe our newsletter for upcoming updates.
We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks
G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India