Translate

Set the translation for an element.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

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

Negative Values

Use negative variants to translate in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:tr--(value)