Translate X

Set the horizontal translation for an element.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:ttx-(value)
Small≥640px
md:ttx-(value)
Medium≥768px
lg:ttx-(value)
Large≥1024px
xxl:ttx-(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:ttx-(value)

Negative Values

Use negative variants to translate in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:ttx--(value)