translate()

The CSS translate() function shifts an element from its default position on a two-dimensional plane. This way, we can reposition an element horizontally, vertically, or both. .parent:hover .box { transform: translate(50px, 50%); } Hover over the box to see it move 50% of its width towards the left: CodePen Embed Fallback Along with other transform functions, it is used inside the transform property. The translate() function is defined in the CSS Transforms Module Level 1 draft. Syntax The translate() function’s syntax looks like this: = translate( , ? ) …which is just a fancy way of saying we can move (translate) and element by one or two lengths or percentages. We’ll get into some examples in a bit. But first: Arguments /* Single argument */ translate(100px) /* moves 100px to the right */ translate(-100%) /* moves 100% of the element's width to the left */ /* Double argument */ translate(50px, 100px) /* moves 50px down, then 100px to the right */ translate(50%, 100%) /* moves 50% of the element's width downwards, then 100% its height to the right */ The translate() function takes two arguments ( tx , ty , as in “translate horizontally” and “translate vertically”). These tell the browser how much to move the element and in which direction direction (whether it’s positive or negative). tx : Specifies the displacement in the horizontal axis. If it’s positive, the element goes right. If it’s negative, the element shifts to the left. ty (optional) : Specifies the displacement in the vertical axis. If it’s positive, the element goes downward, and if it’s negative, the element moves upward. If only one argument is passed, it’s assumed to be tx . Alternatively, when both arguments are passed, the second argument will be ty . Together, they shift the element diagonally. You’ll also notice that we can use either or values. A value is absolute, while a value is