CSS translate() Function Last Updated : 30 Aug, 2024 Comments Improve Suggest changes Like Article Like Report The translate() function in CSS is used to reposition elements along the horizontal (x-axis) and vertical (y-axis) directions. As an inbuilt CSS function, translate() allows web developers to create dynamic and responsive layouts by shifting elements precisely within the document flow. Understanding the syntax and parameters of this function is crucial for effectively leveraging its capabilities. This article provides a guide on using the translate() function, complete with syntax explanations, parameter details, and practical examples. Whether you are aiming to enhance your web design skills or looking to optimize your site for better user experience, mastering the translate() function is essential.Syntax:translate( tx )ortranslate( tx, ty )Parameters:tx: This parameter holds the length of translation corresponding to x-axis.ty: This parameter holds the length of translation corresponding to y-axis. If its value is not defined then it takes 0 as default value.Below examples illustrate the translate() function in CSS: Example 1: html <!DOCTYPE html> <html> <head> <title>CSS translate() function</title> <style> body { text-align:center; } h1 { color:green; } .translate_image { transform: translate(100px, 0); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>CSS translate() function</h2> <h4>Original Image</h4> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo"> <br> <h4>Translate image</h4> <img class="translate_image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt="GeeksforGeeks logo"> </body> </html> Output: Example 2: html <!DOCTYPE html> <html> <head> <title>CSS translate() function</title> <style> body { text-align:center; } h1 { color:green; } .GFG { font-size:35px; font-weight:bold; color:green; } .geeks { transform: translate(100px, 100px); } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>CSS translate() function</h2> <h4>Original Element</h4> <div class="GFG">Welcome to GeeksforGeeks</div> <h4>Translated Element</h4> <div class="GFG geeks">Welcome to GeeksforGeeks</div> </body> </html> Output: The translate() function in CSS is an indispensable tool for web developers aiming to control the positioning of elements with precision. By understanding and utilizing the translate(tx, ty) syntax, developers can create more dynamic and visually appealing web layouts. Incorporating translate() into your CSS toolkit can significantly enhance your ability to create responsive and user-friendly web designs. Experiment with the provided examples to fully grasp its potential and improve your web development projects.Supported Browsers: The browsers supported by translate() function are listed below:Google Chrome 1Edge 12Internet Explorer 9Firefox 3.5Safari 3.1Opera 10.5 Comment More infoAdvertise with us J jit_t Follow Improve Article Tags : Web Technologies CSS CSS-Functions Similar Reads CSS attr() Function The attr() function is an inbuilt function in CSS that returns the value of an attribute of the selected elements.Syntax: attr( attr_name )Parameter: This function accepts a single parameter attr_name which is used to hold the name of the attribute in an HTML element. It is a mandatory parameter.Ret 2 min read CSS blur() Function The CSS blur() function applies a Gaussian blur effect to an element, making it appear out of focus. It is used with the filter property and accepts a length value defining the blur radius. CSS blur() function is part of the CSS filter property, which allows you to apply graphical effects like blurr 3 min read CSS brightness() Function The brightness() function is an inbuilt function which is used to apply a filter to set the brightness of the image. This function uses the linear multiplier to the image to increase or decrease brightness. Syntax: brightness( amount ) Parameters: This function accepts single parameter amount which 1 min read CSS calc() Function The calc() function is an inbuilt CSS function used to perform calculations to determine CSS property values dynamically. This function allows combining different units, such as percentages and pixels, using basic arithmetic operations like addition, subtraction, multiplication, and division. This a 4 min read CSS circle() function The circle() function is an inbuilt function in CSS that is used to create floating text around the circular shape picture or anything else. Syntax: circle(100px at 10px 150px); or circle( percentage ); Parameters: This function accepts a single parameter length or percentage which is used to hold t 3 min read CSS conic-gradient() Function The conic-gradient() function is an inbuilt function in CSS that is used to set a conic gradient as the background image. The conic gradient angle starts from 0 degrees - 360 degrees. Conic are circular and use the center of the element as the source point for color stop. Conic Gradients include pie 3 min read CSS contrast() Function The contrast() function is an inbuilt function which is used to apply a filter to set the contrast of the image. This function adjusts the contrast of the image. Syntax: contrast( amount ) Parameters: This function accepts single parameter amount which holds the amount of contrast. The value of cont 1 min read CSS cubic-bezier() Function The cubic-bezier() function is an inbuilt function in CSS that is used to define a Cubic Bezier curve. A Bezier curve is a mathematically defined curve used in two-dimensional graphic applications like adobe illustrator, Inkscape, etc. The curve is defined by four points: the initial position and th 1 min read CSS drop-shadow() Function The CSS drop-shadow() function adds a shadow effect to elements, like images, using horizontal and vertical offsets, blur radius, spread radius, and color parameters. It enhances visual depth and prominence in web design.Syntax:filter: drop-shadow(offset-x offset-y blur-radius spread-radius color);P 2 min read CSS ellipse() Function The ellipse() function is an inbuilt function in CSS used to create floating text around the ellipse shape picture or anything else. Syntax:circle(100px 10 px at 10px 150px);orellipse( percentage percentage );Parameter: This function accepts a single parameter length or percentage which is used to h 3 min read Like