This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Transform function for a 2d translation which moves an element on the y-axis by the given value. Note that the y-axis increases vertically downwards: positive lengths shift the element down, while negative lengths shift it up.


translateY( <translation-value> )



Value for the translation across the y-axis. Can be a length or a percentage value.


The example shows three div elements, that are transformed individually with the translateY() function.

  1. The translation of the first element moves it 10 pixels up along the y-axis.
  2. You can also provide a negative value. In this case, element-2 is moved 20 pixels to the top, in the negative direction on the y-axis.
  3. Using a percentage value of 50 percent moves element-3 in positive y-direction by a value which matches 50 percent of the element-3’s width. In this case element-3 has a 100 pixel width, so it is moved 50 pixels up.
.element-1 {
    transform: translateY(10px);

.element-2 {
    transform: translateY(-20px);

.element-3 {
    transform: translateY(50%);

View live example

See also

Related articles


External resources