translateY()
Quick Summary for translateY()
The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type.
Code Usage for translateY()
/* <length-percentage> values */ transform: translateY(200px); transform: translateY(50%);
More Details for translateY()

translateY()

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type.

Note: translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0).

Syntax

/* <length-percentage> values */ transform: translateY(200px); transform: translateY(50%);

Values

<length-percentage>

The value is a <length> or <percentage> representing the ordinate of the translating vector. A percentage value refers to the height of the reference box defined by the transform-box property.

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3

A translation is not a linear transformation in ℝ^2 and can't be represented using a Cartesian-coordinate matrix.

( 1 0 0 0 1 t 0 0 1 ) ( 1 0 0 0 1 t 0 0 1 ) ( 1 0 0 0 0 1 0 t 0 0 1 0 0 0 0 1 )
[1 0 0 1 0 t]

Formal syntax

translateY(<length-percentage>)

Examples

HTML

<div>Static</div> <div class="moved">Moved</div> <div>Static</div>

CSS

div {   width: 60px;   height: 60px;   background-color: skyblue; }  .moved {   transform: translateY(10px);   background-color: pink; }

Result

Specifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-translatey

See also

transform <transform-function>

Last modified: Jan 31, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in CSS
rgb() rgba() :right right @right-bottom :root rotate rotate() rotate3d() rotateX() rotateY() rotateZ() row-gap ruby-align ruby-position saturate() scale scale() scale3d() scaleX() scaleY() scaleZ() :scope scroll-behavior scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-align scroll-snap-stop scroll-snap-type @scroll-timeline
Related Search Terms
CSS width 1
CSS the 2
CSS details 1
CSS color 2
CSS position 1
CSS css 5
CSS git 3
CSS property 2
CSS transform 1
CSS height 4
CSS attr 3
CSS iframe 5
CSS select 7
CSS index 6
CSS https 8
CSS matrix 4
CSS CSS 10
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Not Sure
Random CSS Property

var()

The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.
var() css reference