Your Search Results

    translateY()

    The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.

    translateY(ty) is a shortcut for translate(0, ty).

    Syntax

    translateY(t)

    Values

    t
    Is a <length> representing the ordinate of the translating vector.
    Cartesian coordinates on ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

    A translation is not a linear transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

    		 10001t001 10001t001 1000010t00100001
    [1 0 0 1 0 t]

    Examples

    HTML

    <p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

    CSS

    p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: translateY(10px);
  background-color: blue;
}

    Result

    Document Tags and Contributors

    Tags: 
     Contributors to this page: mrstork, SphinxKnight
     Last updated by: mrstork,