Translate Y

Set the vertical translation for an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

tty-0
transform: translateY(0);
tty-1
transform: translateY(.25rem);
tty-2
transform: translateY(.5rem);
tty-3
transform: translateY(.75rem);
tty-4
transform: translateY(1rem);
tty-5
transform: translateY(1.25rem);
tty-6
transform: translateY(1.5rem);
tty-7
transform: translateY(1.75rem);
tty-8
transform: translateY(2rem);
tty-9
transform: translateY(2.25rem);
tty-10
transform: translateY(2.5rem);
tty-11
transform: translateY(2.75rem);
tty-12
transform: translateY(3rem);
tty-13
transform: translateY(3.25rem);
tty-14
transform: translateY(3.5rem);
tty-15
transform: translateY(3.75rem);
tty-16
transform: translateY(4rem);
tty-17
transform: translateY(4.25rem);
tty-18
transform: translateY(4.5rem);
tty-19
transform: translateY(4.75rem);
tty-20
transform: translateY(5rem);
tty-21
transform: translateY(5.25rem);
tty-22
transform: translateY(5.5rem);
tty-23
transform: translateY(5.75rem);
tty-24
transform: translateY(6rem);
tty-25
transform: translateY(6.25rem);
tty-26
transform: translateY(6.5rem);
tty-27
transform: translateY(6.75rem);
tty-28
transform: translateY(7rem);
tty-29
transform: translateY(7.25rem);
tty-30
transform: translateY(7.5rem);
tty-31
transform: translateY(7.75rem);
tty-32
transform: translateY(8rem);
tty-33
transform: translateY(8.25rem);
tty-34
transform: translateY(8.5rem);
tty-35
transform: translateY(8.75rem);
tty-36
transform: translateY(9rem);
tty-37
transform: translateY(9.25rem);
tty-38
transform: translateY(9.5rem);
tty-39
transform: translateY(9.75rem);
tty-40
transform: translateY(10rem);
tty-41
transform: translateY(10.25rem);
tty-42
transform: translateY(10.5rem);
tty-43
transform: translateY(10.75rem);
tty-44
transform: translateY(11rem);
tty-45
transform: translateY(11.25rem);
tty-46
transform: translateY(11.5rem);
tty-47
transform: translateY(11.75rem);
tty-48
transform: translateY(12rem);
tty-49
transform: translateY(12.25rem);
tty-50
transform: translateY(12.5rem);
tty-51
transform: translateY(12.75rem);
tty-52
transform: translateY(13rem);
tty-53
transform: translateY(13.25rem);
tty-54
transform: translateY(13.5rem);
tty-55
transform: translateY(13.75rem);
tty-56
transform: translateY(14rem);
tty-57
transform: translateY(14.25rem);
tty-58
transform: translateY(14.5rem);
tty-59
transform: translateY(14.75rem);
tty-60
transform: translateY(15rem);
tty-61
transform: translateY(15.25rem);
tty-62
transform: translateY(15.5rem);
tty-63
transform: translateY(15.75rem);
tty-64
transform: translateY(16rem);
tty-65
transform: translateY(16.25rem);
tty-66
transform: translateY(16.5rem);
tty-67
transform: translateY(16.75rem);
tty-68
transform: translateY(17rem);
tty-69
transform: translateY(17.25rem);
tty-70
transform: translateY(17.5rem);
tty-71
transform: translateY(17.75rem);
tty-72
transform: translateY(18rem);
tty-73
transform: translateY(18.25rem);
tty-74
transform: translateY(18.5rem);
tty-75
transform: translateY(18.75rem);
tty-76
transform: translateY(19rem);
tty-77
transform: translateY(19.25rem);
tty-78
transform: translateY(19.5rem);
tty-79
transform: translateY(19.75rem);
tty-80
transform: translateY(20rem);
tty-81
transform: translateY(20.25rem);
tty-82
transform: translateY(20.5rem);
tty-83
transform: translateY(20.75rem);
tty-84
transform: translateY(21rem);
tty-85
transform: translateY(21.25rem);
tty-86
transform: translateY(21.5rem);
tty-87
transform: translateY(21.75rem);
tty-88
transform: translateY(22rem);
tty-89
transform: translateY(22.25rem);
tty-90
transform: translateY(22.5rem);
tty-91
transform: translateY(22.75rem);
tty-92
transform: translateY(23rem);
tty-93
transform: translateY(23.25rem);
tty-94
transform: translateY(23.5rem);
tty-95
transform: translateY(23.75rem);
tty-96
transform: translateY(24rem);
tty-97
transform: translateY(24.25rem);
tty-98
transform: translateY(24.5rem);
tty-99
transform: translateY(24.75rem);
tty-100
transform: translateY(25rem);
tty-full
transform: translateY(100%);
tty-half
transform: translateY(50%);

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:tty-(value)
Small≥640px
md:tty-(value)
Medium≥768px
lg:tty-(value)
Large≥1024px
xxl:tty-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:tty-(value)

Negative Values

Use negative variants to translate in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:tty--(value)