translateY()
Published Feb 27, 2022
Contribute to Docs
The translateY()
function moves an element along the vertical Y-axis.
Syntax
transform: translateY(<value>);
The required <value>
can be one of the following:
- Length value:
100px
,1.5em
- Percentage value:
25%
,50%
A positive value moves the element down the vertical Y-axis, while a negative value will move an element up.
Example 1
In the example below, a .box
element is moved down the Y-axis by 100px
:
.box {transform: translateY(100px);}
Example 2
In this example, the element is moved up the Y-axis by -10em
, relative to the height of its direct parent element.
.box {transform: translateY(-10em);}
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours