translateX()

The CSS translateX() function shifts an element horizontally by the specified amount. Specifically, it displaces an element to the right or the left, depending on whether the value is positive or negative. .parent:hover .box { transform: translateX(50%); } CodePen Embed Fallback Along with other transform functions, it is used inside the transform property. It is defined in the CSS Transforms Module Level 1 draft. Syntax The translateX() function has a simple syntax given as: = translateX( ) Or, in plain English: Translate (or move) this element horizontally by this much. Arguments /* */ translateY(80px) /* Element moves 80px to the bottom */ translateY(-24ch) /* Element moves 24ch to the top */ /* */ translateY(50%) /* Element moves 50% of the element's height downward */ translateY(-100%) /* Element moves 100% of the element's height upward */ The translateX() function takes a single argument that specifies how far to move the element and in which direction, which can be either left (negative) or right (positive). The argument passed could be either a or a : : When it’s positive, say 50px , the element moves 50 pixels to the right. On the other hand, in the case of -40ch , the element moves 40 characters to the left. : Percentages are relative to the element’s width. So, for a 400px -wide element, translateX(50%) moves it 200px to the right, while translateX(-50%) moves it 200px to the left. Basic usage We can use the translateX() function to make elements slide onto the webpage in lots of ways. For instance, a sidebar that slides in from the left (or right) when clicking a menu button. To achieve this, we initially shift the sidebar completely off the page: .sidebar { transform: translateX(-100%); transition: transform 0.2s ease-in; } Then, with a little JavaScript, we can toggle an .open class whenever the user clicks on the menu buttons. This