translateY()

The CSS translateY() function shifts an element vertically by the specified amount. Specifically, it shifts an element either up or down, depending on whether the value is positive or negative. .parent:hover .box { transform: translateY(50%); /* Shift down by half the element's height */ } 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 translateY() function’s syntax looks like this: = translateY( ) Just a fancy way of saying: Translate (or move) the element vertically by this much. Arguments /* */ translateY(80px) /* Element moves 80px down*/ translateY(-24ch) /* Element moves 24ch up */ /* */ 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 up (negative) or down (positive). It can take either a or a argument: : When it’s positive, e.g. 20px , it pushes the element 20 pixels down, while negative values like -20px will push the element 20 pixels up. : Percentages are relative to the element’s height, so translateY(40%) on a 100px-tall element pushes the element 40px down, while translateY(-40%) pushes the element 40px up. Basic usage The translate functions are ideal for simpler animations since they don’t disturb the document flow. Specifically, the translateY() function is great for “pop-up” or “fade-in” animations where the elements can slide from the bottom. Take for example, a card component (let’s call it .stat-card ) that slides up when the user clicks a button or scrolls down. The components are initially displaced 50 pixels downwards, hidden with an opacity value of 0 . .stat-card { /*