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%;

Translate X

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%);

Translate Y

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%);

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

Negative Values

Double the hyphen to negate any value on the scale.